// prefix

const inputStates = {
  default: ``
    + `form-bg-input `
    + `form-color-input `
    + `form-border-color-input `
    + `hover:form-bg-input-hover `
    + `hover:form-color-input-hover `
    + `hover:form-border-color-input-hover `
    + `hover:form-shadow-input-hover `
    + `focused:form-bg-input-focus `
    + `focused:form-color-input-focus `
    + `focused:form-border-color-input-focus `
    + `focused:form-shadow-input-focus `
    + `focused:form-ring `
    + `focused-hover:form-shadow-input-hover`,
  disabled: ``
    + `form-bg-disabled `
    + `form-color-disabled `
    + `form-border-color-input`,
  success: ``
    + `form-bg-input-success `
    + `form-color-input-success `
    + `form-border-color-input-success `
    + `hover:form-shadow-input-hover `
    + `focused:form-shadow-input-focus `
    + `focused:form-ring `
    + `focused-hover:form-shadow-input-hover`,
  danger: ``
    + `form-bg-input-danger `
    + `form-color-input-danger `
    + `form-border-color-input-danger `
    + `hover:form-shadow-input-hover `
    + `focused:form-shadow-input-focus `
    + `focused:form-ring `
    + `focused-hover:form-shadow-input-hover`,
}

const checkboxStates = {
  default: ``
    + `form-bg-checkbox `
    + `form-border-color-checkbox `
    + `hover:form-bg-checkbox-hover `
    + `hover:form-border-color-checkbox-hover `
    + `hover:form-shadow-handles-hover `
    + `focused:form-bg-checkbox-focus `
    + `focused:form-border-color-checkbox-focus `
    + `focused:form-shadow-handles-focus `
    + `focused-hover:form-shadow-handles-hover `
    + `checked:form-bg-primary `
    + `checked:form-border-color-checked `
    + `checked-hover:form-bg-primary `
    + `checked-hover:form-border-color-checked `
    + `checked-focused:form-bg-primary`,
  disabled: ``
    + `form-bg-disabled `
    + `form-border-color-checkbox `
    + `opacity-50 `
    + `checked:form-bg-primary `
    + `checked:form-border-color-checked`,
  danger: ``
    + `form-bg-checkbox-danger `
    + `form-border-color-checkbox-danger `
    + `hover:form-shadow-handles-hover `
    + `focused:form-shadow-handles-focus `
    + `focused-hover:form-shadow-handles-hover `
    + `checked:form-bg-primary `
    + `checked:form-border-color-checked`,
}

const checkbox = {
  input: 'flex-shrink-0 appearance-none cursor-pointer outline-zero transition-input duration-200 border-solid form-border-width-checkbox focus:form-ring checked:form-bg-icon-check',
  input_default: checkboxStates.default,
  input_disabled: checkboxStates.disabled,
  input_sm: 'form-w-checkbox-sm form-h-checkbox-sm form-radius-checkbox-sm form-mr-space-checkbox-sm rtl:mr-0 rtl:form-ml-space-checkbox-sm',
  input_md: 'form-w-checkbox form-h-checkbox form-radius-checkbox form-mr-space-checkbox rtl:mr-0 rtl:form-ml-space-checkbox',
  input_lg: 'form-w-checkbox-lg form-h-checkbox-lg form-radius-checkbox-lg form-mr-space-checkbox-lg rtl:mr-0 rtl:form-ml-space-checkbox-lg',
  input_left: '!ml-0',
  input_left_sm: '!form-mr-space-checkbox-sm',
  input_left_md: '!form-mr-space-checkbox',
  input_left_lg: '!form-mr-space-checkbox-lg',
  input_right: '!mr-0',
  input_right_sm: 'form-ml-space-checkbox-sm',
  input_right_md: 'form-ml-space-checkbox',
  input_right_lg: 'form-ml-space-checkbox-lg',
  $input: (classes, { isDisabled, Size }) => ([
    classes.input,
    classes[`input_${Size}`],
    !isDisabled  ? classes.input_default : classes.input_disabled,
  ]),
}

const radio = {
  input: 'flex items-center justify-center flex-shrink-0 appearance-none cursor-pointer rounded-full outline-zero transition-input duration-200 border-solid form-border-width-radio form-shadow-input focus:form-ring checked:form-bg-icon-radio',
  input_default: checkboxStates.default,
  input_disabled: checkboxStates.disabled,
  input_sm: 'form-w-checkbox-sm form-h-checkbox-sm form-mr-space-checkbox-sm rtl:mr-0 rtl:form-ml-space-checkbox-sm',
  input_md: 'form-w-checkbox form-h-checkbox form-mr-space-checkbox rtl:mr-0 rtl:form-ml-space-checkbox',
  input_lg: 'form-w-checkbox-lg form-h-checkbox-lg form-mr-space-checkbox-lg rtl:mr-0 rtl:form-ml-space-checkbox-lg',
  input_left: '!ml-0',
  input_left_sm: '!form-mr-space-checkbox-sm',
  input_left_md: '!form-mr-space-checkbox',
  input_left_lg: '!form-mr-space-checkbox-lg',
  input_right: '!mr-0',
  input_right_sm: 'form-ml-space-checkbox-sm',
  input_right_md: 'form-ml-space-checkbox',
  input_right_lg: 'form-ml-space-checkbox-lg',
  $input: (classes, { isDisabled, Size }) => ([
    classes.input,
    classes[`input_${Size}`],
    !isDisabled  ? classes.input_default : classes.input_disabled,
  ]),
}

const text = {
  container: 'form-text-type',
  inputContainer: 'w-full flex flex-1 transition-input duration-200 border-solid form-border-width-input form-shadow-input form-input-group group',
  inputContainer_sm: 'form-radius-input-sm form-h-input-height-sm',
  inputContainer_md: 'form-radius-input form-h-input-height',
  inputContainer_lg: 'form-radius-input-lg form-h-input-height-lg',
  inputContainer_focused: 'form-focus',
  inputContainer_default: inputStates.default,
  inputContainer_disabled: inputStates.disabled,
  inputContainer_success: inputStates.success,
  inputContainer_danger: inputStates.danger,
  input: 'w-full bg-transparent h-full',
  input_sm: 'form-p-input-sm form-radius-input-sm form-text-sm with-floating:form-p-input-floating-sm',
  input_md: 'form-p-input form-radius-input form-text with-floating:form-p-input-floating',
  input_lg: 'form-p-input-lg form-radius-input-lg form-text-lg with-floating:form-p-input-floating-lg',
  input_enabled: 'border-0 form-color-input group-hover:form-color-input-hover form-autofill-default',
  input_disabled: 'form-color-disabled',
  input_focused: 'form-color-input-focus form-autofill-focus',
  input_success: 'form-color-input-success form-autofill-success',
  input_danger: 'form-color-input-danger form-autofill-danger',
  $inputContainer: (classes, { isDisabled, Size, isSuccess, isDanger, focused }) => ([
    classes.inputContainer,
    classes[`inputContainer_${Size}`],
    isDisabled ? classes.inputContainer_disabled : null,
    !isDisabled && !isSuccess && !isDanger ? classes.inputContainer_default : null,
    !isDisabled && focused ? classes.inputContainer_focused : null,
    !isDisabled && isSuccess ? classes.inputContainer_success : null,
    !isDisabled && isDanger ? classes.inputContainer_danger : null,
  ]),
  $input: (classes, { isDisabled, Size, isSuccess, isDanger, focused }) => ([
    classes.input,
    classes[`input_${Size}`],
    isDisabled ? classes.input_disabled : null,
    !isDisabled && !isSuccess && !isDanger && !focused  ? classes.input_enabled : null,
    !isDisabled && focused && !isSuccess && !isDanger ? classes.input_focused : null,
    !isDisabled && isDanger ? classes.input_danger : null,
    !isDisabled && isSuccess ? classes.input_success : null,
  ]),
}

const textarea = {
  ...text,
  inputContainer_sm: 'form-radius-large-sm',
  inputContainer_md: 'form-radius-large',
  inputContainer_lg: 'form-radius-large-lg',
  input_sm: 'form-p-input-sm form-radius-large-sm form-text-sm with-floating:form-p-input-floating-sm',
  input_md: 'form-p-input form-radius-large form-text with-floating:form-p-input-floating',
  input_lg: 'form-p-input-lg form-radius-large-lg form-text-lg with-floating:form-p-input-floating-lg',
}

const editor = {
  container: 'form-text-type',
  input: 'border-solid transition-input duration-200 form-border-width-input form-shadow-input',
  input_focused: 'form-focus',
  input_default: inputStates.default,
  input_disabled: inputStates.disabled,
  input_success: inputStates.success,
  input_danger: inputStates.danger,
  input_sm: 'form-radius-large-sm form-editor-sm',
  input_md: ' form-radius-large',
  input_lg: 'form-radius-large-lg form-editor-lg',
  $input: (classes, { isDisabled, focused, Size, isSuccess, isDanger }) => ([
    classes.input,
    classes[`input_${Size}`],
    isDisabled ? classes.input_disabled : null,
    !isDisabled && !isSuccess && !isDanger ? classes.input_default : null,
    !isDisabled && focused ? classes.input_focused : null,
    !isDisabled && isSuccess ? classes.input_success : null,
    !isDisabled && isDanger ? classes.input_danger : null,
  ]),
}

const select = {
  container: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-zero transition-input duration-200 border-solid form-border-width-input form-shadow-input form-text-type',
  container_default: inputStates.default,
  container_disabled: inputStates.disabled,
  container_success: inputStates.success,
  container_danger: inputStates.danger,
  container_sm: 'form-text-sm form-radius-input-sm form-min-h-input-height-sm',
  container_md: 'form-text form-radius-input form-min-h-input-height',
  container_lg: 'form-text-lg form-radius-input-lg form-min-h-input-height-lg',
  containerDisabled: '',
  containerOpen: '!rounded-b-none',
  containerOpenTop: '!rounded-t-none',
  containerActive: 'form-focus',
  wrapper: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-zero',
  wrapper_sm: 'form-min-h-input-height-inner-sm',
  wrapper_md: 'form-min-h-input-height-inner',
  wrapper_lg: 'form-min-h-input-height-inner-lg',
  search: 'w-full h-full absolute inset-0 outline-zero appearance-none box-border border-0 bg-transparent form-color-input',
  search_sm: 'form-text-sm form-radius-input-sm form-pl-input-sm form-pr-select-no-clear-sm with-floating:form-p-input-floating-sm rtl:form-pl-select-no-clear-sm rtl:form-pr-input-sm',
  search_md: 'form-text form-radius-input form-pl-input form-pr-select-no-clear with-floating:form-p-input-floating rtl:form-pl-select-no-clear rtl:form-pr-input',
  search_lg: 'form-text-lg form-radius-input-lg form-pl-input-lg form-pr-select-no-clear-lg with-floating:form-p-input-floating-lg rtl:form-pl-select-no-clear-lg rtl:form-pr-input-lg',
  placeholder: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent form-color-placeholder rtl:left-auto rtl:right-0 rtl:pl-0',
  placeholder_sm: 'form-pl-input-sm rtl:form-pr-input-sm',
  placeholder_md: 'form-pl-input rtl:form-pr-input',
  placeholder_lg: 'form-pl-input-lg rtl:form-pr-input-lg',
  caret: 'mask-bg mask-form-caret form-bg-icon w-2.5 h-4 py-px box-content relative flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0',
  caret_sm: 'form-mr-input-sm rtl:form-ml-input-sm',
  caret_md: 'form-mr-input rtl:form-ml-input',
  caret_lg: 'form-mr-input-lg rtl:form-ml-input-lg',
  caretOpen: 'rotate-180 pointer-events-auto',
  clear: 'relative opacity-50 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-100 rtl:pr-0 rtl:pl-3.5',
  clear_sm: 'form-pr-input-sm rtl:form-pl-input-sm',
  clear_md: 'form-pr-input rtl:form-pl-input',
  clear_lg: 'form-pr-input-lg rtl:form-pl-input-lg',
  clearIcon: 'mask-bg mask-form-remove form-bg-icon w-2.5 h-4 py-px box-content inline-block',
  spinner: 'mask-bg mask-form-spinner form-bg-primary w-4 h-4 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0',
  spinner_sm: 'form-mr-input-sm rtl:form-ml-input-sm',
  spinner_md: 'form-mr-input rtl:form-ml-input',
  spinner_lg: 'form-mr-input-lg rtl:form-ml-input-lg',
  infinite: 'flex items-center justify-center w-full',
  infinite_sm: 'form-min-h-input-height-sm',
  infinite_md: 'form-min-h-input-height',
  infinite_lg: 'form-min-h-input-height-lg',
  infiniteSpinner: 'mask-bg mask-form-spinner form-bg-primary w-4 h-4 animate-spin flex-shrink-0 flex-grow-0',
  dropdown: 'max-h-60 absolute z-999 -left-px -right-px bottom-0 transform form-shadow-dropdown form-border-width-dropdown border-solid form-border-color-input form-bg-input -mt-px overflow-y-scroll flex flex-col',
  dropdown_sm: 'form-radius-input-b-sm',
  dropdown_md: 'form-radius-input-b',
  dropdown_lg: 'form-radius-input-b-lg',
  dropdownBottom: 'translate-y-full',
  dropdownTop: '-translate-y-full top-px bottom-auto !rounded-b-none !rounded-t',
  dropdownTop_sm: 'form-radius-input-t-sm',
  dropdownTop_md: 'form-radius-input-t',
  dropdownTop_lg: 'form-radius-input-t-lg',
  dropdownHidden: 'hidden',
  options: 'flex flex-col p-0 m-0 list-none form-color-input',
  optionsTop: '',
  group: 'p-0 m-0',
  groupLabel: 'flex box-border items-center justify-start text-left form-py-0.5input font-semibold form-bg-selected form-color-input filter brightness-90 cursor-default',
  groupLabel_sm: 'form-px-input-sm form-text-small-sm',
  groupLabel_md: 'form-px-input form-text-small',
  groupLabel_lg: 'form-px-input-lg form-text-small-lg',
  groupLabelPointable: 'cursor-pointer',
  groupLabelPointed: 'brightness-95',
  groupLabelSelected: 'form-bg-primary-darker !form-color-on-primary brightness-100',
  groupLabelDisabled: 'form-bg-disabled form-color-disabled cursor-not-allowed',
  groupLabelSelectedPointed: 'form-bg-primary-darker !form-color-on-primary brightness-100 opacity-90',
  groupLabelSelectedDisabled: 'form-bg-primary-darker !form-color-on-primary brightness-100 opacity-50 cursor-not-allowed',
  groupOptions: 'p-0 m-0',
  option: 'flex items-center justify-start box-border text-left cursor-pointer',
  option_sm: 'form-px-input-sm form-py-input-border-sm',
  option_md: 'form-px-input form-py-input-border',
  option_lg: 'form-px-input-lg form-py-input-border-lg',
  optionPointed: 'form-color-input form-bg-selected',
  optionSelected: 'form-bg-primary form-color-on-primary',
  optionDisabled: 'form-color-disabled cursor-not-allowed',
  optionSelectedPointed: 'form-color-on-primary form-bg-primary opacity-90',
  optionSelectedDisabled: 'form-color-on-primary form-bg-primary opacity-50 cursor-not-allowed',
  fakeInput: 'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-zero text-transparent',
  assist: 'form-assistive-text',
  spacer: 'box-content',
  spacer_sm: 'form-h-input-height-inner-sm',
  spacer_md: 'form-h-input-height-inner',
  spacer_lg: 'form-h-input-height-inner-lg',
  noOptions: 'form-color-muted',
  noOptions_sm: 'form-p-input-sm',
  noOptions_md: 'form-p-input',
  noOptions_lg: 'form-p-input-lg',
  noResults: 'form-color-muted',
  noResults_sm: 'form-p-input-sm',
  noResults_md: 'form-p-input',
  noResults_lg: 'form-p-input-lg',
  $container: (classes, { Size, isDanger, isSuccess, isDisabled }) => ([
    classes.select.container,
    classes.select[`container_${Size}`],
    isDisabled ? classes.select.container_disabled : null,
    !isDisabled && !isSuccess && !isDanger ? classes.select.container_default : null,
    !isDisabled && isDanger ? classes.select.container_danger : null,
    !isDisabled && isSuccess ? classes.select.container_success : null,
  ]),
  $wrapper: (classes, { Size }) => ([
    classes.select.wrapper,
    classes.select[`wrapper_${Size}`],
  ]),
  $search: (classes, { Size }) => ([
    classes.select.search,
    classes.select[`search_${Size}`],
  ]),
  $placeholder: (classes, { Size }) => ([
    classes.select.placeholder,
    classes.select[`placeholder_${Size}`],
  ]),
  $caret: (classes, { Size }) => ([
    classes.select.caret,
    classes.select[`caret_${Size}`],
  ]),
  $clear: (classes, { Size }) => ([
    classes.select.clear,
    classes.select[`clear_${Size}`],
  ]),
  $spinner: (classes, { Size }) => ([
    classes.select.spinner,
    classes.select[`spinner_${Size}`],
  ]),
  $dropdown: (classes, { Size, openDirection }) => ([
    classes.select.dropdown,
    classes.select[`dropdown_${Size}`],
    openDirection === 'top' ? null : classes.select.dropdownBottom
  ]),
  $dropdownTop: (classes, { Size }) => ([
    classes.select.dropdownTop,
    classes.select[`dropdownTop_${Size}`],
  ]),
  $groupLabel: (classes, { Size }) => ([
    classes.select.groupLabel,
    classes.select[`groupLabel_${Size}`],
  ]),
  $option: (classes, { Size }) => ([
    classes.select.option,
    classes.select[`option_${Size}`],
  ]),
  $spacer: (classes, { Size }) => ([
    classes.select.spacer,
    classes.select[`spacer_${Size}`],
  ]),
  $noOptions: (classes, { Size }) => ([
    classes.select.noOptions,
    classes.select[`noOptions_${Size}`],
  ]),
  $noResults: (classes, { Size }) => ([
    classes.select.noResults,
    classes.select[`noResults_${Size}`],
  ]),
}

const groupTabs = {
  container: 'flex align-start cursor-pointer',
  wrapper: 'flex items-center justify-center w-full border-solid form-border-width-input',
  wrapper_not_last: '!border-r-0',
  wrapper_first: '',
  wrapper_first_sm: 'form-radius-input-l-sm',
  wrapper_first_md: 'form-radius-input-l',
  wrapper_first_lg: 'form-radius-input-l-lg',
  wrapper_last: '',
  wrapper_last_sm: 'form-radius-input-r-sm',
  wrapper_last_md: 'form-radius-input-r',
  wrapper_last_lg: 'form-radius-input-r-lg',
  wrapper_selected: 'form-bg-primary form-color-on-primary border-black border-opacity-15',
  wrapper_unselected: 'form-bg-input form-color-input form-border-color-input hover:form-bg-input-hover hover:form-color-input-hover',
  wrapper_disabled: 'opacity-50 pointer-events-none',
  wrapper_sm: 'form-text-sm form-p-group-tabs-sm',
  wrapper_md: 'form-text form-p-group-tabs',
  wrapper_lg: 'form-text-lg form-p-group-tabs-lg',
  input: 'hidden',
  text: '',
}

const groupBlocks = {
  container: 'flex align-start cursor-pointer form-bg-input',
  container_sm: 'form-radius-large-sm',
  container_md: 'form-radius-large',
  container_lg: 'form-radius-large',
  wrapper: 'flex items-center w-full border-solid form-border-width-input form-border-color-input form-color-input',
  wrapper_not_last: '!border-b-0',
  wrapper_first: '',
  wrapper_first_sm: 'form-radius-large-t-sm',
  wrapper_first_md: 'form-radius-large-t',
  wrapper_first_lg: 'form-radius-large-t-lg',
  wrapper_last: '',
  wrapper_last_sm: 'form-radius-large-b-sm',
  wrapper_last_md: 'form-radius-large-b',
  wrapper_last_lg: 'form-radius-large-b-lg',
  wrapper_selected: 'form-bg-selected',
  wrapper_unselected: 'form-bg-input',
  wrapper_disabled: 'opacity-50',
  wrapper_sm: 'px-4 py-2.5 form-text-sm form-p-group-blocks-sm',
  wrapper_md: 'px-4 py-3 form-text form-p-group-blocks',
  wrapper_lg: 'px-4 py-3.5 form-text-lg form-p-group-blocks-lg',
  text_wrapper: 'ml-2',
  text: '',
  description: 'form-color-muted',
  description_sm: 'form-text-small-sm -mt-0.5',
  description_md: 'form-text-small -mt-0.5',
  description_lg: 'form-text-small-lg -mt-0.5',
  $container: (classes, { Size }) => ([
    classes.container,
    classes[`container_${Size}`],
  ]),
}

export default {
  // Elements
  ButtonElement: {
    container: 'form-text-type',
    button: 'inline-block transition form-border-width-btn form-shadow-btn focus:outline-zero',
    button_enabled: 'cursor-pointer transition-transform ease-linear focus:form-ring transform hover:scale-105',
    button_disabled: 'opacity-60 cursor-not-allowed',
    button_loading: 'form-color-transparent opacity-60 cursor-not-allowed',
    button_loading_primary: 'form-bg-spinner-on-primary',
    button_loading_secondary: 'form-bg-spinner-btn-secondary',
    button_loading_danger: 'form-bg-spinner-white',
    button_primary: 'form-bg-btn form-color-btn form-border-color-btn',
    button_secondary: 'form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary',
    button_danger: 'form-bg-btn-danger form-color-btn-danger form-border-color-btn-danger',
    button_full: 'w-full',
    button_not_full: '',
    button_left: 'float-left',
    button_center: 'flex mx-auto items-center justify-center',
    button_right: 'float-right',
    button_sm: 'form-p-btn-sm form-radius-btn-sm form-text-sm',
    button_md: 'form-p-btn form-radius-btn form-text',
    button_lg: 'form-p-btn-lg form-radius-btn-lg form-text-lg',
    $button: (classes, { isDisabled, isLoading, buttonClass, Size, danger, secondary, full, align }) => ([
      classes.button,
      danger ? classes.button_danger : null,
      secondary ? classes.button_secondary : null,
      !danger && !secondary ? classes.button_primary : null,
      classes[`button_${Size}`],
      isDisabled ? classes.button_disabled : null,
      !isDisabled && !isLoading ? classes.button_enabled : null,
      isLoading ? classes.button_loading : null,
      isLoading && danger ? classes.button_loading_danger : null,
      isLoading && secondary ? classes.button_loading_secondary : null,
      isLoading && !secondary && !danger ? classes.button_loading_primary : null,
      full ? classes.button_full : classes.button_not_full,
      align === 'left' ? classes.button_left : null,
      align === 'center' ? classes.button_center : null,
      align === 'right' ? classes.button_right : null,
      buttonClass,
    ]),
  },
  CaptchaElement: {
    container: '',
    wrapper: '',
    captcha: '',
  },
  CheckboxElement: {
    ...checkbox,
    container: 'form-contains-link',
    wrapper: 'flex align-start',
    wrapper_sm: 'form-text-sm',
    wrapper_md: 'form-text',
    wrapper_lg: 'form-text-lg',
    wrapper_left: 'rtl:justify-end',
    wrapper_right: 'justify-end rtl:justify-start',
    input: checkbox.input + ' form-shadow-handles',
    input_danger: checkboxStates.danger,
    input_sm: checkbox.input_sm + ' form-mt-checkbox-sm',
    input_md: checkbox.input_md + ' form-mt-checkbox',
    input_lg: checkbox.input_lg + ' form-mt-checkbox-lg',
    text: 'cursor-pointer',
    text_left: 'rtl:-order-1',
    text_right: '-order-1 rtl:order-none',
    $wrapper: (classes, { Size, align }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`],
      align === 'left' ? classes.wrapper_left : null,
      align === 'right' ? classes.wrapper_right : null,
    ]),
    $input: (classes, { isDisabled, Size, isDanger, align }) => ([
      classes.input,
      classes[`input_${Size}`],
      !isDisabled && !isDanger ? classes.input_default : null,
      isDisabled ? classes.input_disabled : null,
      isDanger ? classes.input_danger : null,
      align === 'left' ? [classes.input_left, classes[`input_left_${Size}`]] : null,
      align === 'right' ? [classes.input_right, classes[`input_right_${Size}`]] : null,
    ]),
    $text: (classes, { align }) => ([
      classes.text,
      align === 'left' ? classes.text_left : null,
      align === 'right' ? classes.text_right : null,
    ]),
  },
  CheckboxgroupElement: {
    container: '',
    wrapper: 'flex flex-col justify-start',
    wrapper_sm: '',
    wrapper_md: '',
    wrapper_lg: '',
    $wrapper: (classes, { Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`]
    ]),
  },
  CheckboxgroupElement_tabs: {
    container: 'form-text-type',
    wrapper: 'grid grid-flow-col form-shadow-input',
    wrapper_sm: 'form-radius-large-sm',
    wrapper_md: 'form-radius-large',
    wrapper_lg: 'form-radius-large-lg',
    $wrapper: (classes, { Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`]
    ]),
  },
  CheckboxgroupElement_blocks: {
    container: '',
    wrapper: 'flex flex-col justify-start form-shadow-input',
    wrapper_sm: 'form-radius-large-sm',
    wrapper_md: 'form-radius-large',
    wrapper_lg: 'form-radius-large-lg',
    $wrapper: (classes, { Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`]
    ]),
  },
  DateElement: {
    inputWrapper: 'block w-full h-full',
    ...text,
  },
  DatesElement: {
    inputWrapper: 'block w-full h-full',
    ...text,
  },
  EditorElement: {
    ...editor,
  },
  FileElement: {
    container: 'form-text-type',
    container_removing: 'opacity-50',
    button: 'form-border-width-btn form-shadow-btn inline-block transition focus:outline-zero',
    button_enabled: 'form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary cursor-pointer transition-transform transform hover:scale-105 focus:form-ring',
    button_disabled: 'opacity-50 cursor-not-allowed',
    button_sm: 'form-p-btn-sm form-radius-btn-sm form-text-sm',
    button_md: 'form-p-btn form-radius-btn form-text',
    button_lg: 'form-p-btn-lg form-radius-btn-lg form-text-lg',
    $container: (classes, { removing }) => ([
      classes.container,
      removing ? classes.container_removing : null,
    ]),
    $button: (classes, { isDisabled, preparing, Size }) => ([
      classes.button,
      classes[`button_${Size}`],
      !isDisabled && !preparing ? classes.button_enabled : null,
      isDisabled || preparing ? classes.button_disabled : null,
    ]),
  },
  GroupElement: {
    container: '',
    wrapper: 'grid grid-cols-12',
    wrapper_sm: 'form-gap-gutter-sm',
    wrapper_md: 'form-gap-gutter',
    wrapper_lg: 'form-gap-gutter-lg',
    $wrapper: (classes, { Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`]
    ]),
  },
  ListElement: {
    container: '',
    list: 'grid',
    list_sm: 'form-gap-y-gutter-sm',
    list_md: 'form-gap-y-gutter',
    list_lg: 'form-gap-y-gutter-lg',
    list_disabled: '',
    list_sorting: '',
    listItem: 'grid grid-cols-12 relative form-list-group ghost:opacity-60',
    listItem_sm: 'form-gap-gutter-sm',
    listItem_md: 'form-gap-gutter',
    listItem_lg: 'form-gap-gutter-lg',
    handle: 'absolute left-0 top-0 z-999 transform -translate-x-full cursor-grab active:cursor-grabbing opacity-0 transition list-group-hover:opacity-100',
    handle_sm: 'form-w-input-height-sm form-h-input-height-sm',
    handle_md: 'form-w-input-height form-h-input-height',
    handle_lg: 'form-w-input-height-lg form-h-input-height-lg',
    handleIcon: 'mask-bg mask-form-sort-handle form-bg-icon mask-size-2.8 block w-full h-full',
    remove: 'absolute z-999 w-4 h-4 box-content p-0.5 top-px left-0 form-bg-passive rounded-full transform -translate-x-1/2 -translate-y-1/2 transition opacity-0 filter hover:brightness-90 list-group-hover:opacity-100 focus:opacity-100',
    removeIcon: 'mask-bg mask-form-remove-light form-bg-passive-color mask-size-3 block w-full h-full',
    add: 'inline-block form-bg-primary form-border-width-btn form-border-color-primary form-color-on-primary form-shadow-btn ease-linear transition-transform transform hover:scale-105 focus:form-ring',
    add_sm: 'form-mt-gutter-sm form-radius-small-sm form-text-small-sm form-p-btn-small-sm',
    add_md: 'form-mt-gutter form-radius-small form-text-small form-p-btn-small',
    add_lg: 'form-mt-gutter-lg form-radius-small-lg form-text-small-lg form-p-btn-small-lg',
    $list: (classes, { isDisabled, sorting, Size }) => ([
      classes.list,
      classes[`list_${Size}`],
      isDisabled ? classes.list_disabled : null,
      sorting ? classes.list_sorting : null,
    ]),
    $listItem: (classes, { Size }) => ([
      classes.listItem,
      classes[`listItem_${Size}`],
    ]),
    $handle: (classes, { Size }) => ([
      classes.handle,
      classes[`handle_${Size}`],
    ]),
    $add: (classes, { Size }) => ([
      classes.add,
      classes[`add_${Size}`],
    ]),
  },
  LocationElement: {
    ...text,
  },
  MultifileElement: {
    container: 'form-text-type',
    list: '',
    list_sm: 'form-mt-gutter-sm',
    list_md: 'form-mt-gutter',
    list_lg: 'form-mt-gutter-lg',
    list_file: 'grid',
    list_file_sm: 'form-gap-y-0.5gutter-sm',
    list_file_md: 'form-gap-y-0.5gutter',
    list_file_lg: 'form-gap-y-0.5gutter-lg',
    list_image: 'grid',
    list_image_sm: 'form-gap-y-0.5gutter-sm',
    list_image_md: 'form-gap-y-0.5gutter',
    list_image_lg: 'form-gap-y-0.5gutter-lg',
    list_gallery: 'flex flex-wrap',
    list_gallery_sm: 'form-gap-0.5gutter-sm',
    list_gallery_md: 'form-gap-0.5gutter',
    list_gallery_lg: 'form-gap-0.5gutter-lg',
    list_disabled: '',
    list_sorting: '',
    listItem: 'relative group ghost:opacity-60',
    handle: '',
    handle_file: 'absolute left-0 top-0 transform -translate-x-full cursor-grab active:cursor-grabbing opacity-0 transition group-hover:opacity-100',
    handle_file_sm: 'form-w-input-height-sm form-h-input-height-sm',
    handle_file_md: 'form-w-input-height form-h-input-height',
    handle_file_lg: 'form-w-input-height-lg form-h-input-height-lg',
    handle_image: 'absolute left-0 top-0 transform -translate-x-full cursor-grab active:cursor-grabbing opacity-0 transition group-hover:opacity-100',
    handle_image_sm: 'form-w-input-height-sm form-h-input-height-sm',
    handle_image_md: 'form-w-input-height form-h-input-height',
    handle_image_lg: 'form-w-input-height-lg form-h-input-height-lg',
    handle_gallery: 'absolute w-4 h-4 box-content top-0.5 left-0.5 mt-px ml-px form-bg-passive bg-center bg-no-repeat rounded-full transition opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing filter hover:brightness-90',
    handle_gallery_sm: '',
    handle_gallery_md: '',
    handle_gallery_lg: '',
    handleIcon: '',
    handleIcon_file: 'mask-bg mask-form-sort-handle form-bg-icon mask-size-2.8 block w-full h-full',
    handleIcon_image: 'mask-bg mask-form-sort-handle form-bg-icon mask-size-2.8 block w-full h-full',
    handleIcon_gallery: 'mask-bg mask-form-arrows form-bg-input-color mask-size-3 block w-full h-full',
    dnd: '',
    button: 'inline-block transition form-border-width-btn focus:outline-zero',
    button_enabled: 'form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary form-shadow-btn cursor-pointer transition-transform transform hover:scale-105 focus:form-ring',
    button_disabled: 'opacity-50 cursor-not-allowed',
    button_sm: 'form-p-btn-sm form-radius-btn-sm form-text-sm',
    button_md: 'form-p-btn form-radius-btn form-text',
    button_lg: 'form-p-btn-lg form-radius-btn-lg form-text-lg',
    $list: (classes, { isDisabled, sorting, view, Size }) => ([
      classes.list,
      classes[`list_${Size}`],
      isDisabled ? classes.list_disabled : null,
      sorting ? classes.list_sorting : null,
      classes[`list_${view}`],
      classes[`list_${view}_${Size}`],
    ]),
    $handle: (classes, { view, Size }) => ([
      classes.handle,
      classes[`handle_${view}`],
      classes[`handle_${view}_${Size}`],
    ]),
    $handleIcon: (classes, { view }) => ([
      classes.handleIcon,
      classes[`handleIcon_${view}`],
    ]),
    $button: (classes, { isDisabled, preparing, Size }) => ([
      classes.button,
      classes[`button_${Size}`],
      !isDisabled && !preparing ? classes.button_enabled : null,
      isDisabled || preparing ? classes.button_disabled : null,
    ]),
  },
  MultiselectElement: {
    container: 'form-text-type',
    input: 'w-full form-p-input transition-input duration-200 border-solid form-border-width-input form-shadow-input',
    input_default: inputStates.default,
    input_disabled: inputStates.disabled,
    input_success: inputStates.success,
    input_danger: inputStates.danger,
    input_sm: 'form-p-input-sm form-radius-large-sm form-text-sm with-floating:form-p-input-floating-sm',
    input_md: 'form-p-input form-radius-large form-text with-floating:form-p-input-floating',
    input_lg: 'form-p-input-lg form-radius-large-lg form-text-lg with-floating:form-p-input-floating-lg',
    inputWrapper: '',
    select: {
      ...select,
      multipleLabel: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent rtl:left-auto rtl:right-0 rtl:pl-0',
      multipleLabel_sm: 'form-py-input-sm form-pl-input-sm form-radius-input-sm form-text-sm form-min-h-input-height-inner-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm',
      multipleLabel_md: 'form-py-input form-pl-input form-radius-input form-text form-min-h-input-height-inner with-floating:form-p-input-floating rtl:form-pr-input',
      multipleLabel_lg: 'form-py-input-lg form-pl-input-lg form-radius-input-lg form-text-lg form-min-h-input-height-inner-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg',
      multipleLabel_caretClear_sm: 'form-pl-input-sm form-pr-select-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-sm',
      multipleLabel_caretClear_md: 'form-pl-input form-pr-select with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select',
      multipleLabel_caretClear_lg: 'form-pl-input-sm form-pr-select-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-sm',
      multipleLabel_noCaret_sm: 'form-pl-input-sm form-pr-select-no-caret-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-no-caret-sm',
      multipleLabel_noCaret_md: 'form-pl-input form-pr-select-no-caret with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select-no-caret',
      multipleLabel_noCaret_lg: 'form-pl-input-lg form-pr-select-no-caret-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-select-no-caret-lg',
      multipleLabel_noClear_sm: 'form-pl-input-sm form-pr-select-no-clear-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-no-clear-sm',
      multipleLabel_noClear_md: 'form-pl-input form-pr-select-no-clear with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select-no-clear',
      multipleLabel_noClear_lg: 'form-pl-input-lg form-pr-select-no-clear-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-select-no-clear-lg',
      multipleLabel_noCaretClear_sm: 'form-pl-input-sm form-pr-input-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-input-sm',
      multipleLabel_noCaretClear_md: 'form-pl-input form-pr-input with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-input',
      multipleLabel_noCaretClear_lg: 'form-pl-input-lg form-pr-input-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-input-lg',
      $multipleLabel: (classes, { Size, caret, canClear, }) => ([
        classes.select.multipleLabel,
        classes.select[`multipleLabel_${Size}`],
        canClear && caret ? classes.select[`multipleLabel_caretClear_${Size}`] : null,
        !caret && canClear ? classes.select[`multipleLabel_noCaret_${Size}`] : null,
        !canClear && caret ? classes.select[`multipleLabel_noClear_${Size}`] : null,
        !canClear && !caret ? classes.select[`multipleLabel_noCaretClear_${Size}`] : null,
      ]),
    },
    $input: (classes, { isDisabled, Size, isDanger, isSuccess }) => ([
      classes.input,
      classes[`input_${Size}`],
      isDisabled ? classes.input_disabled : null,
      !isDisabled && !isSuccess && !isDanger ? classes.input_default : null,
      !isDisabled && isDanger ? classes.input_danger : null,
      !isDisabled && isSuccess ? classes.input_success : null,
    ]),
  },
  ObjectElement: {
    container: '',
    wrapper: 'grid grid-cols-12',
    wrapper_sm: 'form-gap-gutter-sm',
    wrapper_md: 'form-gap-gutter',
    wrapper_lg: 'form-gap-gutter-lg',
    wrapper_embed: '!block',
    $wrapper: (classes, { Size, embed }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`],
      embed ? classes.wrapper_embed : null,
    ]),
  },
  PhoneElement: {
    ...text,
    optionsWrapper: 'flex items-center',
    optionsWrapper_sm: 'form-ml-input-sm rtl:ml-0 rtl:form-mr-input-sm',
    optionsWrapper_md: 'form-ml-input rtl:ml-0 rtl:form-mr-input',
    optionsWrapper_lg: 'form-ml-input-lg rtl:ml-0 rtl:form-mr-input-lg',
    option: 'flex items-center cursor-pointer py-1.25 px-3 whitespace-nowrap form-color-input',
    option_active: 'form-bg-selected',
    optionWrapper: 'flex items-center',
    flag: 'bg-form-flags bg-[length:24px_4716px] overflow-hidden rounded-sm bg-no-repeat bg-[0px_0px] w-[24px] h-[16px]',
    country: 'ml-3 rtl:ml-0 rtl:mr-3 font-semibold text-[15px] form-color-input flex',
    number: 'ml-2 rtl:ml-0 rtl:mr-2 form-color-muted rtl:order-1',
    placeholder: 'bg-form-flags bg-[length:24px_4716px] overflow-hidden bg-no-repeat rounded-sm bg-[0px_0px] w-[24px] h-[16px] opacity-60',
    $optionsWrapper: (classes, { Size }) => ([
      classes.optionsWrapper,
      classes[`optionsWrapper_${Size}`],
    ]),
    $option: (classes) => (active) => ([
      classes.option,
      active ? classes.option_active : null
    ]),
  },
  RadioElement: {
    ...radio,
    container: '',
    wrapper: 'flex align-start rtl:justify-start',
    wrapper_sm: 'form-text-sm',
    wrapper_md: 'form-text',
    wrapper_lg: 'form-text-lg',
    wrapper_left: 'rtl:justify-end',
    wrapper_right: 'justify-end rtl:justify-start',
    input: radio.input + ' form-shadow-handles',
    input_danger: checkboxStates.danger,
    input_sm: radio.input_sm + ' form-mt-checkbox-sm',
    input_md: radio.input_md + ' form-mt-checkbox',
    input_lg: radio.input_lg + ' form-mt-checkbox-lg',
    text: 'cursor-pointer',
    text_left: 'rtl:-order-1',
    text_right: '-order-1 rtl:order-none',
    $wrapper: (classes, { Size, align }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`],
      align === 'left' ? classes.wrapper_left : null,
      align === 'right' ? classes.wrapper_right : null,
    ]),
    $input: (classes, { isDisabled, Size, isDanger, align }) => ([
      classes.input,
      classes[`input_${Size}`],
      !isDisabled && !isDanger ? classes.input_default : null,
      isDisabled ? classes.input_disabled : null,
      isDanger ? classes.input_danger : null,
      align === 'left' ? [classes.input_left, classes[`input_left_${Size}`]] : null,
      align === 'right' ? [classes.input_right, classes[`input_right_${Size}`]] : null,
    ]),
    $text: (classes, { align }) => ([
      classes.text,
      align === 'left' ? classes.text_left : null,
      align === 'right' ? classes.text_right : null,
    ]),
  },
  RadiogroupElement: {
    container: '',
    wrapper: 'flex flex-col justify-start',
    wrapper_sm: '',
    wrapper_md: '',
    wrapper_lg: '',
    $wrapper: (classes, { Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`]
    ]),
  },
  RadiogroupElement_tabs: {
    container: ' form-text-type',
    wrapper: 'grid grid-flow-col grid form-shadow-input',
    wrapper_sm: 'form-radius-large-sm',
    wrapper_md: 'form-radius-large',
    wrapper_lg: 'form-radius-large-lg',
    $wrapper: (classes, { Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`]
    ]),
  },
  RadiogroupElement_blocks: {
    container: '',
    wrapper: 'flex flex-col justify-start form-shadow-input',
    wrapper_sm: 'form-radius-large-sm',
    wrapper_md: 'form-radius-large',
    wrapper_lg: 'form-radius-large-lg',
    $wrapper: (classes, { Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`]
    ]),
  },
  SelectElement: {
    container: 'form-text-type',
    input: 'w-full transition-input duration-200 border-solid form-border-width-input form-shadow-input',
    input_default: inputStates.default,
    input_disabled: inputStates.disabled,
    input_success: inputStates.success,
    input_danger: inputStates.danger,
    input_sm: 'form-py-input-sm form-pl-input-sm form-pr-select-no-clear-sm form-radius-input-sm form-text-sm form-min-h-input-height-inner-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-no-clear-sm',
    input_md: 'form-py-input form-pl-input form-pr-select-no-clear form-radius-input form-text form-min-h-input-height-inner with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select-no-clear',
    input_lg: 'form-py-input-lg form-pl-input-lg form-pr-select-no-clear-lg form-radius-input-lg form-text-lg form-min-h-input-height-inner-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-select-no-clear-lg',
    inputWrapper: 'relative',
    inputPlaceholder: 'absolute left-0 top-0 bottom-0 form-color-placeholder pointer-events-none flex items-center',
    inputPlaceholder_sm: 'form-p-input-border-sm',
    inputPlaceholder_md: 'form-p-input-border',
    inputPlaceholder_lg: 'form-p-input-border-lg',
    inputCaret: 'mask-bg mask-form-caret form-bg-icon w-2.5 h-4 py-px box-content absolute right-0 top-1/2 transform -translate-y-1/2 transition-transform transform pointer-events-none rtl:right-auto rtl:left-0',
    inputCaret_sm: 'form-mr-input-sm rtl:mr-0 rtl:form-ml-input-sm',
    inputCaret_md: 'form-mr-input rtl:mr-0 rtl:form-ml-input',
    inputCaret_lg: 'form-mr-input-lg rtl:mr-0 rtl:form-ml-input-lg',
    select: {
      ...select,
      singleLabel: 'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent box-border rtl:left-auto rtl:right-0 rtl:pl-0',
      singleLabel_sm: 'form-py-input-sm form-pl-input-sm form-radius-input-sm form-text-sm form-min-h-input-height-inner-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm',
      singleLabel_md: 'form-py-input form-pl-input form-radius-input form-text form-min-h-input-height-inner with-floating:form-p-input-floating rtl:form-pr-input',
      singleLabel_lg: 'form-py-input-lg form-pl-input-lg form-radius-input-lg form-text-lg form-min-h-input-height-inner-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg',
      singleLabel_caretClear_sm: 'form-pl-input-sm form-pr-select-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-sm',
      singleLabel_caretClear_md: 'form-pl-input form-pr-select with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select',
      singleLabel_caretClear_lg: 'form-pl-input-sm form-pr-select-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-sm',
      singleLabel_noCaret_sm: 'form-pl-input-sm form-pr-select-no-caret-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-no-caret-sm',
      singleLabel_noCaret_md: 'form-pl-input form-pr-select-no-caret with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select-no-caret',
      singleLabel_noCaret_lg: 'form-pl-input-lg form-pr-select-no-caret-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-select-no-caret-lg',
      singleLabel_noClear_sm: 'form-pl-input-sm form-pr-select-no-clear-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-select-no-clear-sm',
      singleLabel_noClear_md: 'form-pl-input form-pr-select-no-clear with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-select-no-clear',
      singleLabel_noClear_lg: 'form-pl-input-lg form-pr-select-no-clear-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-select-no-clear-lg',
      singleLabel_noCaretClear_sm: 'form-pl-input-sm form-pr-input-sm with-floating:form-p-input-floating-sm rtl:form-pr-input-sm rtl:form-pl-input-sm',
      singleLabel_noCaretClear_md: 'form-pl-input form-pr-input with-floating:form-p-input-floating rtl:form-pr-input rtl:form-pl-input',
      singleLabel_noCaretClear_lg: 'form-pl-input-lg form-pr-input-lg with-floating:form-p-input-floating-lg rtl:form-pr-input-lg rtl:form-pl-input-lg',
      singleLabelText: 'overflow-hidden block whitespace-nowrap max-w-full',
      singleLabelText_truncate: 'overflow-ellipsis',
      $singleLabel: (classes, { Size, caret, canClear }) => ([
        classes.select.singleLabel,
        classes.select[`singleLabel_${Size}`],
        canClear && caret ? classes.select[`singleLabel_caretClear_${Size}`] : null,
        !caret && canClear ? classes.select[`singleLabel_noCaret_${Size}`] : null,
        !canClear && caret ? classes.select[`singleLabel_noClear_${Size}`] : null,
        !canClear && !caret ? classes.select[`singleLabel_noCaretClear_${Size}`] : null,
      ]),
      $singleLabelText: (classes, { truncate }) => ([
        classes.select.singleLabelText,
        truncate ? classes.select[`singleLabelText_truncate`] : null,
      ]),
    },
    $input: (classes, { isDisabled, Size, isSuccess, isDanger }) => ([
      classes.input,
      classes[`input_${Size}`],
      isDisabled ? classes.input_disabled : null,
      !isDisabled && !isSuccess && !isDanger ? classes.input_default : null,
      !isDisabled && isDanger ? classes.input_danger : null,
      !isDisabled && isSuccess ? classes.input_success : null,
    ]),
    $inputWrapper: (classes, { Size }) => ([
      classes.inputWrapper,
      classes[`inputWrapper_${Size}`],
    ]),
    $inputPlaceholder: (classes, { Size }) => ([
      classes.inputPlaceholder,
      classes[`inputPlaceholder_${Size}`],
    ]),
    $inputCaret: (classes, { Size }) => ([
      classes.inputCaret,
      classes[`inputCaret_${Size}`],
    ]),
  },
  SignatureElement: {
    container: '',
    wrapper: 'transition-input form-border-width-input form-text relative w-full',
    wrapper_sm: 'form-radius-large-sm',
    wrapper_md: 'form-radius-large',
    wrapper_lg: 'form-radius-large-lg',
    wrapper_disabled: 'form-bg-disabled form-color-disabled form-border-color-input cursor-not-allowed pointer-events-none',
    wrapper_enabled: 'form-bg-input form-color-input form-border-color-input focused:form-ring focused:form-border-color-input-focus',
    wrapper_readonly: 'pointer-events-none',
    line: 'absolute top-1/2 left-6 right-6 form-border-color-signature-hr',
    loadedWrapper: 'absolute left-9 right-9 form-border-width-input border-transparent top-0 bottom-0 flex items-center justify-center',
    loadedWrapper_disabled: 'opacity-50',
    loadedWrapper_enabled: '',
    loadedImg: 'max-h-full',
    innerWrapper: '',
    innerWrapper_disabled: 'opacity-50',
    innerWrapper_enabled: '',
    input: 'bg-transparent absolute top-1/2 left-0 right-0 transform -translate-y-1/2 pr-9 text-center indent-9 transition-colors h-[8.5rem] rtl:pr-0 rtl:pl-9',
    input_invert: 'dark:filter dark:invert',
    placeholder: 'absolute left-0 right-0 bottom-[50%] transform translate-y-1/2 pointer-events-none form-color-placeholder text-center',
    uploadContainer: 'absolute left-9 right-9 bottom-1/2 transform translate-y-1/2 transition-opacity',
    uploadContainer_dragging: 'opacity-50',
    uploadContainer_not_dragging: '',
    uploadWrapper: 'flex flex-col items-center justify cente text-gray-400 text-center',
    uploadWrapper_processing: 'opacity-60 pointer-events-none',
    dndText: 'form-color-input',
    uploadButton: 'inline-block transition form-border-width-btn form-shadow-btn focus:outline-zero form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary cursor-pointer transition-transform ease-linear focus:form-ring transform hover:scale-105 form-p-btn form-radius-btn form-text',
    uploadPreview: 'max-w-full mx-auto',
    pad: 'absolute inset-0',
    pad_invert: 'dark:filter dark:invert',
    colors: 'absolute bottom-5 left-1/2 transform -translate-x-1/2 flex flex-row gap-2',
    color: 'transform transition-transform cursor-pointer rounded-full outline-none focus-visible:form-ring',
    color_invert: 'dark:filter dark:invert',
    color_active: 'scale-[1.4]',
    color_inactive: 'hover:scale-[1.4]',
    actions: 'absolute top-2 left-3 right-3 flex items-center justify-between opacity-50 transition-opacity z-1 hover:opacity-100',
    undosWrapper: 'absolute right-3 top-3 flex items-center justify-center gap-3 rtl:right-auto rtl:left-3',
    undo: 'mask-bg mask-form-trix-undo form-bg-icon w-3 h-3',
    undo_enabled: 'cursor-pointer focus-visible:opacity-80',
    undo_disabled: 'opacity-50 cursor-not-allowed',
    redo: 'mask-bg mask-form-trix-redo form-bg-icon w-3 h-3',
    redo_enabled: 'cursor-pointer focus-visible:opacity-80',
    redo_disabled: 'opacity-50 cursor-not-allowed',
    clearWrapper: 'absolute top-1/2 transform -translate-y-1/2 right-4 text-sm',
    clear: 'mask-bg mask-form-remove form-bg-input-color w-3 h-4 py-px box-content inline-block cursor-pointer focus-visible:opacity-60',
    $wrapper: (classes, { isDisabled, readonly, Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`],
      isDisabled ? classes.wrapper_disabled : classes.wrapper_enabled,
      readonly ? classes.wrapper_readonly : null,
    ]),
    $loadedWrapper: (classes, { isDisabled }) => ([
      classes.loadedWrapper,
      isDisabled ? classes.loadedWrapper_disabled : classes.loadedWrapper_enabled,
    ]),
    $innerWrapper: (classes, { isDisabled }) => ([
      classes.innerWrapper,
      isDisabled ? classes.innerWrapper_disabled : classes.innerWrapper_enabled,
    ]),
    $input: (classes, { invertColors, color }) => ([
      classes.input,
      invertColors.indexOf(color) !== -1 ? classes.input_invert : null,
    ]),
    $uploadContainer: (classes, { dragging }) => ([
      classes.uploadContainer,
      dragging ? classes.uploadContainer_dragging : classes.uploadContainer_not_dragging,
    ]),
    $uploadWrapper: (classes, { processing }) => ([
      classes.uploadWrapper,
      processing ? classes.uploadWrapper_processing : null,
    ]),
    $pad: (classes, { invertColors, color }) => ([
      classes.pad,
      invertColors.indexOf(color) !== -1 ? classes.pad_invert : null,
    ]),
    $color: (classes, { color, invertColors, mode }) => (c) => ([
      classes.color,
      c === color ? classes.color_active : classes.color_inactive,
      invertColors.indexOf(c) !== -1 && mode !== 'upload' ? classes.color_invert : null,
    ]),
    $undo: (classes, { undosLeft }) => ([
      classes.undo,
      undosLeft ? classes.undo_enabled : classes.undo_disabled,
    ]),
    $redo: (classes, { redos }) => ([
      classes.redo,
      redos.length ? classes.redo_enabled : classes.redo_disabled,
    ]),
  },
  SliderElement: {
    container: '',
    wrapper: '',
    wrapper_sm: '',
    wrapper_md: '',
    wrapper_lg: '',
    slider: {
      target: 'relative box-border user-select-none touch-none tap-highlight-transparent touch-callout-none disabled:cursor-not-allowed disabled:opacity-50',
      target_sm: 'form-my-slider-sm',
      target_md: 'form-my-slider',
      target_lg: 'form-my-slider-lg',
      focused: 'slider-focused',
      tooltipFocus: 'slider-tooltip-focus',
      tooltipDrag: 'slider-tooltip-drag',
      ltr: 'slider-ltr',
      rtl: 'slider-rtl',
      horizontal: 'slider-horizontal',
      horizontal_sm: 'form-h-slider-horizontal-sm',
      horizontal_md: 'form-h-slider-horizontal',
      horizontal_lg: 'form-h-slider-horizontal-lg',
      vertical: 'slider-vertical',
      vertical_sm: 'form-h-slider-vertical-sm form-w-slider-vertical-sm',
      vertical_md: 'form-h-slider-vertical form-w-slider-vertical',
      vertical_lg: 'form-h-slider-vertical-lg form-w-slider-vertical-lg',
      textDirectionRtl: 'slider-txt-rtl',
      textDirectionLtr: 'slider-txt-ltr',
      base: 'form-shadow-input w-full h-full relative z-1 form-bg-passive',
      base_sm: 'form-radius-slider-sm',
      base_md: 'form-radius-slider',
      base_lg: 'form-radius-slider-lg',
      connects: 'w-full h-full relative overflow-hidden z-0 form-radius-slider',
      connects_sm: 'form-radius-slider-sm',
      connects_md: 'form-radius-slider',
      connects_lg: 'form-radius-slider-lg',
      connect: 'absolute z-1 top-0 right-0 transform-origin-0 transform-style-flat h-full w-full form-bg-primary cursor-pointer tap:duration-300 tap:transition-transform disabled:cursor-not-allowed',
      connect_sm: 'form-radius-slider-sm',
      connect_md: 'form-radius-slider',
      connect_lg: 'form-radius-slider-lg',
      origin: 'slider-origin absolute z-1 top-0 right-0 transform-origin-0 transform-style-flat h-full w-full h:h-0 v:-top-full txt-rtl-h:left-0 txt-rtl-h:right-auto v:w-0 tap:duration-300 tap:transition-transform',
      handle: 'absolute rounded-full transition-shadow border-0 cursor-grab txt-rtl-h:-left-2 txt-rtl-h:right-auto disabled:cursor-not-allowed disabled:pointer-events-none form-bg-slider-handle form-shadow-handles hover:form-shadow-handles-hover focus:form-shadow-handles-focus focused-hover:form-shadow-handles-hover focus:outline-zero focus:form-ring',
      handle_sm: 'form-size-slider-handle-sm h:form-top-slider-handle-horizontal-sm h:form-right-slider-handle-horizontal-sm v:form-bottom-slider-handle-vertical-sm v:form-right-slider-handle-vertical-sm',
      handle_md: 'form-size-slider-handle h:form-top-slider-handle-horizontal h:form-right-slider-handle-horizontal v:form-bottom-slider-handle-vertical v:form-right-slider-handle-vertical',
      handle_lg: 'form-size-slider-handle-lg h:form-top-slider-handle-horizontal-lg h:form-right-slider-handle-horizontal-lg v:form-bottom-slider-handle-vertical-lg v:form-right-slider-handle-vertical-lg',
      handleUpper: 'slider-handle-upper',
      handleLower: 'slider-handle-lower',
      touchArea: 'h-full w-full',
      tooltip: 'absolute block font-semibold whitespace-nowrap min-w-5 text-center border form-border-color-slider-tooltip form-bg-primary form-color-on-primary transform tt-focus:hidden tt-focused:block tt-drag:hidden tt-dragging:block h:-translate-x-1/2 h:left-1/2 v:-translate-y-1/2 v:top-1/2 merge-h:translate-x-1/2 merge-v:translate-y-1/2 merge-h:left-auto merge-v:top-auto',
      tooltip_sm: 'form-text-small-sm form-py-slider-tooltip-sm form-px-slider-tooltip-sm form-radius-small-sm',
      tooltip_md: 'form-text-small form-py-slider-tooltip form-px-slider-tooltip form-radius-small',
      tooltip_lg: 'form-text-small-lg form-py-slider-tooltip-lg form-px-slider-tooltip-lg form-radius-small-lg',
      tooltipTop: 'form-slider-tooltip-top',
      tooltipTop_sm: 'form-bottom-slider-tooltip-top-sm merge-h:form-bottom-slider-tooltip-top-merged-sm h:arrow-bottom-sm',
      tooltipTop_md: 'form-bottom-slider-tooltip-top merge-h:form-bottom-slider-tooltip-top-merged h:arrow-bottom',
      tooltipTop_lg: 'form-bottom-slider-tooltip-top-lg merge-h:form-bottom-slider-tooltip-top-merged-lg h:arrow-bottom-lg',
      tooltipBottom: 'form-slider-tooltip-bottom',
      tooltipBottom_sm: 'form-top-slider-tooltip-bottom-sm merge-h:form-top-slider-tooltip-bottom-merged-sm h:arrow-top-sm',
      tooltipBottom_md: 'form-top-slider-tooltip-bottom merge-h:form-top-slider-tooltip-bottom-merged h:arrow-top',
      tooltipBottom_lg: 'form-top-slider-tooltip-bottom-lg merge-h:form-top-slider-tooltip-bottom-merged-lg h:arrow-top-lg',
      tooltipLeft: 'form-slider-tooltip-left',
      tooltipLeft_sm: 'form-right-slider-tooltip-left-sm merge-v:form-right-slider-tooltip-left-merged-sm v:arrow-right-sm',
      tooltipLeft_md: 'form-right-slider-tooltip-left merge-v:form-right-slider-tooltip-left-merged v:arrow-right',
      tooltipLeft_lg: 'form-right-slider-tooltip-left-lg merge-v:form-right-slider-tooltip-left-merged-lg v:arrow-right-lg',
      tooltipRight: 'form-slider-tooltip-right',
      tooltipRight_sm: 'form-left-slider-tooltip-right-sm merge-v:form-left-slider-tooltip-right-merged-sm v:arrow-left-sm',
      tooltipRight_md: 'form-left-slider-tooltip-right merge-v:form-left-slider-tooltip-right-merged v:arrow-left',
      tooltipRight_lg: 'form-left-slider-tooltip-right-lg merge-v:form-left-slider-tooltip-right-merged-lg v:arrow-left-lg',
      tooltipHidden: 'slider-tooltip-hidden',
      active: 'slider-active cursor-grabbing',
      draggable: 'cursor-ew-resize v:cursor-ns-resize',
      tap: 'slider-state-tap',
      drag: 'slider-state-drag',
      $target: (classes, { Size }) => ([
        classes.slider.target,
        classes.slider[`target_${Size}`],
      ]),
      $horizontal: (classes, { Size }) => ([
        classes.slider.horizontal,
        classes.slider[`horizontal_${Size}`],
      ]),
      $vertical: (classes, { Size }) => ([
        classes.slider.vertical,
        classes.slider[`vertical_${Size}`],
      ]),
      $base: (classes, { Size }) => ([
        classes.slider.base,
        classes.slider[`base_${Size}`],
      ]),
      $connects: (classes, { Size }) => ([
        classes.slider.connects,
        classes.slider[`connects_${Size}`],
      ]),
      $connect: (classes, { Size }) => ([
        classes.slider.connect,
        classes.slider[`connect_${Size}`],
      ]),
      $handle: (classes, { Size }) => ([
        classes.slider.handle,
        classes.slider[`handle_${Size}`],
      ]),
      $tooltip: (classes, { Size }) => ([
        classes.slider.tooltip,
        classes.slider[`tooltip_${Size}`],
      ]),
      $tooltipTop: (classes, { Size }) => ([
        classes.slider.tooltipTop,
        classes.slider[`tooltipTop_${Size}`],
      ]),
      $tooltipBottom: (classes, { Size }) => ([
        classes.slider.tooltipBottom,
        classes.slider[`tooltipBottom_${Size}`],
      ]),
      $tooltipLeft: (classes, { Size }) => ([
        classes.slider.tooltipLeft,
        classes.slider[`tooltipLeft_${Size}`],
      ]),
      $tooltipRight: (classes, { Size }) => ([
        classes.slider.tooltipRight,
        classes.slider[`tooltipRight_${Size}`],
      ]),
    },
    $wrapper: (classes, { Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`],
    ]),
  },
  StaticElement: {
    container: 'form-contains-link',
    content: '',
    content_sm: 'form-text-sm',
    content_md: 'form-text',
    content_lg: 'form-text-lg',
    content_top_1: 'form-mt-tag-1',
    content_top_2: 'form-mt-tag-2',
    content_top_3: 'form-mt-tag-3',
    content_bottom_1: 'form-mb-tag-1',
    content_bottom_2: 'form-mb-tag-2',
    content_bottom_3: 'form-mb-tag-3',
    tag: '',
    tag_sm: '',
    tag_md: '',
    tag_lg: '',
    tag_top_1: 'form-mt-tag-1',
    tag_top_2: 'form-mt-tag-2',
    tag_top_3: 'form-mt-tag-3',
    tag_bottom_1: 'form-mb-tag-1',
    tag_bottom_2: 'form-mb-tag-2',
    tag_bottom_3: 'form-mb-tag-3',
    tag_left: 'text-left',
    tag_center: 'text-center',
    tag_right: 'text-right',
    tag_p: '',
    tag_p_sm: '',
    tag_p_md: '',
    tag_p_lg: '',
    tag_h1: 'font-bold',
    tag_h1_sm: 'form-text-h1-mobile-sm md:form-text-h1-sm',
    tag_h1_md: 'form-text-h1-mobile md:form-text-h1',
    tag_h1_lg: 'form-text-h1-mobile-lg md:form-text-h1-lg',
    tag_h2: 'font-bold',
    tag_h2_sm: 'form-text-h2-mobile-sm md:form-text-h2-sm',
    tag_h2_md: 'form-text-h2-mobile md:form-text-h2',
    tag_h2_lg: 'form-text-h2-mobile-lg md:form-text-h2-lg',
    tag_h3: 'font-bold',
    tag_h3_sm: 'form-text-h3-mobile-sm md:form-text-h3-sm',
    tag_h3_md: 'form-text-h3-mobile md:form-text-h3',
    tag_h3_lg: 'form-text-h3-mobile-lg md:form-text-h3-lg',
    tag_h4: 'font-bold',
    tag_h4_sm: 'form-text-h4-mobile-sm md:form-text-h4-sm',
    tag_h4_md: 'form-text-h4-mobile md:form-text-h4',
    tag_h4_lg: 'form-text-h4-mobile-lg md:form-text-h4-lg',
    tag_blockquote: 'form-border-width-blockquote form-border-color-blockquote',
    tag_blockquote_sm: 'form-text-blockquote-sm form-p-blockquote-sm',
    tag_blockquote_md: 'form-text-blockquote form-p-blockquote',
    tag_blockquote_lg: 'form-text-blockquote-lg form-p-blockquote-lg',
    tag_a: 'form-color-link form-decoration-link',
    tag_a_sm: '',
    tag_a_md: '',
    tag_a_lg: '',
    tag_hr: 'form-static-tag-hr-wrapper form-border-color-hr form-py-hr',
    tag_img: 'form-static-tag-img',
    $content: (classes, { Size, top, bottom }) => ([
      classes.content,
      classes[`content_${Size}`],
      top >= 1 ? classes[`content_top_${top}`] : null,
      bottom >= 1 ? classes[`content_bottom_${bottom}`] : null,
    ]),
    $tag: (classes, { Size, tag, align, top, bottom }) => ([
      classes.tag,
      classes[`tag_${Size}`],
      classes[`tag_${tag}`],
      classes[`tag_${tag}_${Size}`] || null,
      align === 'left' ? classes.tag_left : null,
      align === 'center' ? classes.tag_center : null,
      align === 'right' ? classes.tag_right : null,
      top >= 1 ? classes[`tag_top_${top}`] : null,
      bottom >= 1 ? classes[`tag_bottom_${bottom}`] : null,
    ]),
  },
  TagsElement: {
    container: 'form-text-type',
    select: {
      ...select,
      tags: 'flex-grow flex-shrink flex flex-wrap items-center min-w-0 rtl:pl-0',
      tags_sm: 'form-pl-input-y-sm form-mt-space-tags-sm with-floating:form-p-tags-floating-sm rtl:form-pr-input-y-sm',
      tags_md: 'form-pl-input-y form-mt-space-tags with-floating:form-p-tags-floating rtl:form-pr-input-y',
      tags_lg: 'form-pl-input-y-lg form-mt-space-tags-lg with-floating:form-p-tags-floating-lg rtl:form-pr-input-y-lg',
      tag: 'form-bg-tag form-color-tag form-border-width-tag form-border-color-tag font-semibold  flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:mr-0',
      tag_sm: 'form-radius-input-tag-sm form-text-small-sm form-py-tag-sm form-pl-tag-sm form-mr-space-tags-sm form-mb-space-tags-sm rtl:form-pr-tag-sm rtl:form-ml-space-tags-sm',
      tag_md: 'form-radius-input-tag form-text-small form-py-tag form-pl-tag form-mr-space-tags form-mb-space-tags rtl:form-pr-tag rtl:form-ml-space-tags',
      tag_lg: 'form-radius-input-tag-lg form-text-small-lg form-py-tag-lg form-pl-tag-lg form-mr-space-tags-lg form-mb-space-tags-lg rtl:form-pr-tag-lg rtl:form-ml-space-tags-lg',
      tagDisabled: 'opacity-50',
      tagDisabled_sm: 'form-pr-tag-sm rtl:form-pl-tag-sm',
      tagDisabled_md: 'form-pr-tag rtl:form-pl-tag',
      tagDisabled_lg: 'form-pr-tag-lg rtl:form-pl-tag-lg',
      tagWrapper: 'overflow-hidden overflow-ellipsis',
      tagWrapper_nobreak: 'whitespace-nowrap',
      tagWrapperBreak: 'whitespace-normal break-all',
      tagRemove: 'flex items-center justify-center p-1 mx-0.5 hover:bg-black hover:bg-opacity-10 group',
      tagRemove_sm: 'form-radius-input-tag-sm',
      tagRemove_md: 'form-radius-input-tag',
      tagRemove_lg: 'form-radius-input-tag-lg',
      tagRemoveIcon: 'mask-bg mask-form-remove bg-current inline-block w-3 h-3',
      tagsSearchWrapper: 'inline-block relative form-ml-space-tags form-mr-space-tags form-mb-space-tags flex-grow flex-shrink h-full max-w-full',
      tagsSearchWrapper_sm: 'form-ml-space-tags-sm form-mr-space-tags-sm form-mb-space-tags-sm',
      tagsSearchWrapper_md: 'form-ml-space-tags form-mr-space-tags form-mb-space-tags',
      tagsSearchWrapper_lg: 'form-ml-space-tags-lg form-mr-space-tags-lg form-mb-space-tags-lg',
      tagsSearch: 'absolute bg-transparent form-color-input inset-0 border-0 outline-zero appearance-none p-0 box-border w-full pr-2',
      tagsSearch_sm: 'form-text-sm',
      tagsSearch_md: 'form-text',
      tagsSearch_lg: 'form-text-lg',
      tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
      $tags: (classes, { Size }) => ([
        classes.select.tags,
        classes.select[`tags_${Size}`],
      ]),
      $tag: (classes, { Size }) => ([
        classes.select.tag,
        classes.select[`tag_${Size}`],
      ]),
      $tagWrapper: (classes, { breakTags }) => ([
        classes.select.tagWrapper,
        !breakTags.value ? classes.select.tagWrapper_noBreak : null,
      ]),
      $tagDisabled: (classes, { Size }) => ([
        classes.select.tagDisabled,
        classes.select[`tagDisabled_${Size}`],
      ]),
      $tagRemove: (classes, { Size }) => ([
        classes.select.tagRemove,
        classes.select[`tagRemove_${Size}`],
      ]),
      $tagsSearchWrapper: (classes, { Size }) => ([
        classes.select.tagsSearchWrapper,
        classes.select[`tagsSearchWrapper_${Size}`],
      ]),
      $tagsSearch: (classes, { Size }) => ([
        classes.select.tagsSearch,
        classes.select[`tagsSearch_${Size}`],
      ]),
    }
  },
  TextareaElement: {
    ...textarea,
  },
  TextElement: {
    ...text,
  },
  ToggleElement: {
    container: 'form-contains-link',
    wrapper: 'flex items-start',
    wrapper_left: 'rtl:justify-end',
    wrapper_right: 'justify-end rtl:justify-start',
    text: '',
    text_sm: 'form-ml-space-checkbox-sm rtl:form-mr-space-checkbox-sm rtl:ml-0',
    text_md: 'form-ml-space-checkbox rtl:form-mr-space-checkbox rtl:ml-0',
    text_lg: 'form-ml-space-checkbox-lg rtl:form-mr-space-checkbox-lg rtl:ml-0',
    text_left: 'rtl:-order-1 rtl:!mr-0',
    text_left_sm: '!form-ml-space-checkbox-sm',
    text_left_md: '!form-ml-space-checkbox',
    text_left_lg: '!form-ml-space-checkbox-lg',
    text_right: '!ml-0 -order-1 rtl:order-none',
    text_right_sm: 'form-mr-space-checkbox-sm',
    text_right_md: 'form-mr-space-checkbox',
    text_right_lg: 'form-mr-space-checkbox-lg',
    toggle: {
      container: 'form-shadow-handles inline-block rounded-full outline-zero transition-input duration-200 ease-in-out focus:form-ring',
      container_enabled: 'hover:form-shadow-handles-hover focus:form-shadow-handles-focus focused-hover:form-shadow-handles-hover',
      container_disabled: 'cursor-not-allowed opacity-50',
      toggle: 'flex rounded-full relative cursor-pointer transition-colors items-center box-content form-border-width-toggle leading-none',
      toggle_sm: 'form-w-toggle-sm form-h-toggle-sm text-xs',
      toggle_md: 'form-w-toggle form-h-toggle text-xs',
      toggle_lg: 'form-w-toggle-lg form-h-toggle-lg text-0.5sm',
      toggleOn: 'form-bg-primary form-border-color-primary justify-start form-color-on-primary',
      toggleOff: 'form-bg-passive form-border-color-passive form-color-passive justify-end',
      toggleOnDisabled: 'form-bg-primary form-border-color-primary justify-start form-color-on-primary',
      toggleOffDisabled: 'form-bg-passive form-border-color-passive form-color-passive justify-end',
      handle: 'inline-block form-bg-toggle-handle top-0 rounded-full absolute transition-all',
      handle_sm: 'form-size-toggle-handle-sm',
      handle_md: 'form-size-toggle-handle',
      handle_lg: 'form-size-toggle-handle-lg',
      handleOn: 'left-full transform -translate-x-full',
      handleOff: 'left-0',
      handleOnDisabled: 'left-full transform -translate-x-full',
      handleOffDisabled: 'left-0',
      label: 'text-center border-box whitespace-nowrap select-none',
      label_sm: 'form-w-toggle-label-sm',
      label_md: 'form-w-toggle-label',
      label_lg: 'form-w-toggle-label-lg',
      $container: (classes, { Size, isDisabled }) => ([
        classes.toggle.container,
        classes.toggle[`container_${Size}`],
        !isDisabled ? classes.toggle.container_enabled : classes.toggle.container_disabled,
      ]),
      $toggle: (classes, { Size }) => ([
        classes.toggle.toggle,
        classes.toggle[`toggle_${Size}`],
      ]),
      $handle: (classes, { Size }) => ([
        classes.toggle.handle,
        classes.toggle[`handle_${Size}`],
      ]),
      $label: (classes, { Size }) => ([
        classes.toggle.label,
        classes.toggle[`label_${Size}`],
      ]),
    },
    $text: (classes, { Size, align }) => ([
      classes.text,
      classes[`text_${Size}`],
      align === 'left' ? [classes.text_left, classes[`text_left_${Size}`]] : null,
      align === 'right' ? [classes.text_right, classes[`text_right_${Size}`]] : null,
    ]),
    $wrapper: (classes, { align }) => ([
      classes.wrapper,
      align === 'left' ? classes.wrapper_left : null,
      align === 'right' ? classes.wrapper_right : null,
    ]),
  },
  TTextareaElement: {
    ...textarea,
  },
  TTextElement: {
    ...text,
  },
  TEditorElement: {
    ...editor,
  },

  // Wrappers
  DatepickerWrapper: {
    datepicker: '',
    calendarContainer: ''
  },
  EditorWrapper: {
    container: 'form-bg-input form-color-input',
    container_hideBold: 'form-editor-hide-bold',
    container_hideItalic: 'form-editor-hide-italic',
    container_hideStrike: 'form-editor-hide-strike',
    container_hideLink: 'form-editor-hide-link',
    container_hideHeading: 'form-editor-hide-heading',
    container_hideQuote: 'form-editor-hide-quote',
    container_hideCode: 'form-editor-hide-code',
    container_hideBulletList: 'form-editor-hide-bullet-list',
    container_hideNumberList: 'form-editor-hide-number-list',
    container_hideDecreaseNesting: 'form-editor-hide-decrease-nesting',
    container_hideIncreaseNesting: 'form-editor-hide-increase-nesting',
    container_hideAttach: 'form-editor-hide-attach',
    container_hideUndo: 'form-editor-hide-undo',
    container_hideRedo: 'form-editor-hide-redo',
    $container: (classes, { hideTools }) => ([
      classes.container,
    ].concat(hideTools.map(t => classes[`container_hide${t.split('-').map(s=>s.charAt(0).toUpperCase()+s.slice(1)).join('')}`])))
  },

  // Components
  ElementAddon: {
    container: 'form-bg-addon form-color-addon flex items-center justify-center flex-grow-0 flex-shrink-0',
    container_before: '',
    container_after: 'order-2',
    container_sm: '',
    container_md: '',
    container_lg: '',
    container_before_sm: 'form-radius-input-l-sm form-pl-input-sm form-pr-space-addon-sm',
    container_before_md: 'form-radius-input-l form-pl-input form-pr-space-addon',
    container_before_lg: 'form-radius-input-l-lg form-pl-input-lg form-pr-space-addon-lg',
    container_after_sm: 'form-radius-input-r-sm form-pr-input-sm form-pl-space-addon-sm',
    container_after_md: 'form-radius-input-r form-pr-input form-pl-space-addon',
    container_after_lg: 'form-radius-input-r-lg form-pr-input-lg form-pl-space-addon-lg',
    wrapper: 'contents items-center justify-center',
    $container: (classes, { type, Size }) => ([
      classes.container,
      classes[`container_${Size}`],
      classes[`container_${type}`],
      classes[`container_${type}_${Size}`],
    ]),
  },
  ElementAddonOptions: {
    container: 'flex items-center',
    container_disabled: 'cursor-default opacity-50 pointer-events-none',
    wrapper: 'flex items-center transition-all form-color-input hover:form-bg-selected focus:form-bg-selected outline-none rounded cursor-pointer whitespace-nowrap',
    wrapper_default: 'px-1 py-1',
    wrapper_relaxed: 'px-3 py-1.75',
    caret: 'mask-bg mask-form-caret form-bg-icon w-2.5 h-4 ml-2 rtl:ml-0 rtl:mr-2',
    dropdown: 'form-bg-input form-shadow-dropdown form-border-width-dropdown rounded border-solid form-border-color-input fixed z-[1002] overflow-x-scroll max-h-[calc(100vh-2rem)]',
    optionWrapper: '',
    option: 'flex items-center form-color-input cursor-pointer py-1.25 px-3 whitespace-nowrap',
    option_active: 'form-bg-selected',
    $container: (classes, { Size, el$ }) => ([
      classes.container,
      el$.isDisabled || el$.readonly ? classes.container_disabled : null,
    ]),
    $wrapper: (classes, { relaxed }) => ([
      classes.wrapper,
      relaxed ? classes.wrapper_relaxed : classes.wrapper_default,
    ]),
    $option: (classes, { selected, pointed }) => (option) => ([
      classes.option,
      selected.index === option.index || pointed.index === option.index ? classes.option_active : null
    ])
  },
  ElementDescription: {
    container: 'form-color-muted',
    container_sm: 'form-text-small-sm mt-0.5',
    container_md: 'form-text-small mt-1',
    container_lg: 'form-text-small-lg mt-1',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`],
    ]),
  },
  ElementError: {
    container: 'form-color-danger block',
    container_sm: 'form-text-small-sm mt-0.5',
    container_md: 'form-text-small mt-1',
    container_lg: 'form-text-small-lg mt-1',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`],
    ]),
  },
  ElementInfo: {
    container: 'inline-block w-3.5 h-3.5 form-bg-info relative ml-1 cursor-pointer form-info-group',
    wrapper: 'absolute z-1000 -mt-px opacity-0 invisible info-group-hover:opacity-100 info-group-hover:form-visible transition-opacity w-52 flex',
    wrapper_left: 'right-5 -top-0.5 justify-end',
    wrapper_right: 'left-5 -top-0.5 justify-start',
    wrapper_top: 'left-1/2 transform -translate-x-1/2 bottom-8 justify-center',
    wrapper_bottom: 'left-1/2 transform -translate-x-1/2 top-6 justify-center',
    content: 'bg-black bg-opacity-90 text-white rounded-md form-text-small py-1 px-2.5 not-italic inline-block relative',
    $wrapper: (classes, { position }) => ([
      classes.wrapper,
      classes[`wrapper_${position}`],
    ]),
  },
  ElementLabel: {
    container: 'flex items-start',
    container_sm: 'form-text-sm',
    container_md: 'form-text',
    container_lg: 'form-text-lg',
    container_vertical_sm: 'form-pb-gutter/3-sm form-pt-0 form-pr-0',
    container_vertical_md: 'form-pb-gutter/3 form-pt-0 form-pr-0',
    container_vertical_lg: 'form-pb-gutter/3-lg form-pt-0 form-pr-0',
    container_vertical_sm_SM: 'sm:form-pb-gutter/3-sm sm:form-pt-0 sm:form-pr-0',
    container_vertical_md_SM: 'sm:form-pb-gutter/3 sm:form-pt-0 sm:form-pr-0',
    container_vertical_lg_SM: 'sm:form-pb-gutter/3-lg sm:form-pt-0 sm:form-pr-0',
    container_vertical_sm_MD: 'md:form-pb-gutter/3-sm md:form-pt-0 md:form-pr-0',
    container_vertical_md_MD: 'md:form-pb-gutter/3 md:form-pt-0 md:form-pr-0',
    container_vertical_lg_MD: 'md:form-pb-gutter/3-lg md:form-pt-0 md:form-pr-0',
    container_vertical_sm_LG: 'lg:form-pb-gutter/3-sm lg:form-pt-0 lg:form-pr-0',
    container_vertical_md_LG: 'lg:form-pb-gutter/3 lg:form-pt-0 lg:form-pr-0',
    container_vertical_lg_LG: 'lg:form-pb-gutter/3-lg lg:form-pt-0 lg:form-pr-0',
    container_vertical_sm_XL: 'xl:form-pb-gutter/3-sm xl:form-pt-0 xl:form-pr-0',
    container_vertical_md_XL: 'xl:form-pb-gutter/3 xl:form-pt-0 xl:form-pr-0',
    container_vertical_lg_XL: 'xl:form-pb-gutter/3-lg xl:form-pt-0 xl:form-pr-0',
    container_vertical_sm_2XL: '2xl:form-pb-gutter/3-sm 2xl:form-pt-0 2xl:form-pr-0',
    container_vertical_md_2XL: '2xl:form-pb-gutter/3 2xl:form-pt-0 2xl:form-pr-0',
    container_vertical_lg_2XL: '2xl:form-pb-gutter/3-lg 2xl:form-pt-0 2xl:form-pr-0',
    container_horizontal_sm: 'form-pr-gutter-sm text-type:form-pt-input-border-sm pb-0',
    container_horizontal_md: 'form-pr-gutter text-type:form-pt-input-border pb-0',
    container_horizontal_lg: 'form-pr-gutter-lg text-type:form-pt-input-border-lg pb-0',
    container_horizontal_sm_SM: 'sm:form-pr-gutter-sm sm:text-type:form-pt-input-border-sm sm:pb-0',
    container_horizontal_md_SM: 'sm:form-pr-gutter sm:text-type:form-pt-input-border sm:pb-0',
    container_horizontal_lg_SM: 'sm:form-pr-gutter-lg sm:text-type:form-pt-input-border-lg sm:pb-0',
    container_horizontal_sm_MD: 'md:form-pr-gutter-sm md:text-type:form-pt-input-border-sm md:pb-0',
    container_horizontal_md_MD: 'md:form-pr-gutter md:text-type:form-pt-input-border md:pb-0',
    container_horizontal_lg_MD: 'md:form-pr-gutter-lg md:text-type:form-pt-input-border-lg md:pb-0',
    container_horizontal_sm_LG: 'lg:form-pr-gutter-sm lg:text-type:form-pt-input-border-sm lg:pb-0',
    container_horizontal_md_LG: 'lg:form-pr-gutter lg:text-type:form-pt-input-border lg:pb-0',
    container_horizontal_lg_LG: 'lg:form-pr-gutter-lg lg:text-type:form-pt-input-border-lg lg:pb-0',
    container_horizontal_sm_XL: 'xl:form-pr-gutter-sm xl:text-type:form-pt-input-border-sm xl:pb-0',
    container_horizontal_md_XL: 'xl:form-pr-gutter xl:text-type:form-pt-input-border xl:pb-0',
    container_horizontal_lg_XL: 'xl:form-pr-gutter-lg xl:text-type:form-pt-input-border-lg xl:pb-0',
    container_horizontal_sm_2XL: '2xl:form-pr-gutter-sm 2xl:text-type:form-pt-input-border-sm 2xl:pb-0',
    container_horizontal_md_2XL: '2xl:form-pr-gutter 2xl:text-type:form-pt-input-border 2xl:pb-0',
    container_horizontal_lg_2XL: '2xl:form-pr-gutter-lg 2xl:text-type:form-pt-input-border-lg 2xl:pb-0',
    wrapper: '',
    $container: (classes, { el$, Size }) => ([
      classes.container,
      classes[`container_${Size}`],
      !el$.inline ? el$.columnsClasses.label : null,
      el$.cols.default.label < 12 ? classes[`container_horizontal_${Size}`] : classes[`container_vertical_${Size}`],
      ...(Object.keys(el$.cols).length > 1 ? (el$.$vueform.config.breakpoints||['sm', 'md', 'lg', 'xl', '2xl']).map((breakpoint) => {
        if (!el$.cols[breakpoint]?.label) {
          return null
        }

        return el$.cols[breakpoint].label < 12
          ? classes[`container_horizontal_${Size}_${breakpoint.toUpperCase()}`].join(' ')
          : classes[`container_vertical_${Size}_${breakpoint.toUpperCase()}`].join(' ')
      }) : []),
    ]),
  },
  ElementLabelFloating: {
    container: 'label-floating relative pointer-events-none',
    label: 'absolute z-1 leading-px text-0.5xs px-px transition-input duration-200 ease-in-out whitespace-nowrap in-input-group:-form-top-border-width-input-t',
    label_enabled: 'form-bg-input form-color-floating',
    label_disabled: 'form-bg-disabled form-color-floating',
    label_danger: 'form-bg-input-danger form-color-floating-danger',
    label_success: 'form-bg-input-success form-color-floating-success',
    label_focused: 'form-bg-input-focus form-color-floating-focus',
    label_sm: 'form-left-input-sm form-mt-floating-sm rtl:left-auto rtl:form-right-input-sm',
    label_md: 'form-left-input form-mt-floating rtl:left-auto rtl:form-right-input',
    label_lg: 'form-left-input-lg form-mt-floating-lg rtl:left-auto rtl:form-right-input-lg',
    label_invisible: 'opacity-0 invisible',
    label_visible: 'opacity-100 visible',
    $label: (classes, { visible, Size, el$ }) => ([
      classes.label,
      classes[`label_${Size}`],
      visible ? classes.label_visible : classes.label_invisible,
      el$.focused && !el$.isDanger && !el$.isSuccess ? classes.label_focused : null,
      !el$.isDisabled && !el$.isDanger && !el$.isSuccess ? classes.label_enabled : null,
      el$.isDisabled ? classes.label_disabled : null,
      el$.isDanger ? classes.label_danger : null,
      el$.isSuccess ? classes.label_success : null,
    ]),
  },
  ElementLayout: {
    container: '',
    container_sm: 'form-text-sm',
    container_md: 'form-text',
    container_lg: 'form-text-lg',
    container_error: 'has-error',
    outerWrapper: 'grid grid-cols-12',
    innerContainer: 'flex-1 grid grid-cols-12',
    innerWrapperBefore: 'col-span-12',
    innerWrapper: '',
    innerWrapperAfter: 'col-span-12',
    $container: (classes, { el$, Size }) => ([
      classes.container,
      classes[`container_${Size}`],
      el$.columnsClasses.container,
      el$.classes.container,
      !el$.isStatic && el$.errors && !!el$.errors.length ? classes.container_error : null
    ]),
    $innerContainer:  (classes, { el$ }) => ([
      classes.innerContainer,
      el$.columnsClasses.innerContainer,
    ]),
    $innerWrapper:  (classes, { el$ }) => ([
      classes.innerWrapper,
      el$.columnsClasses.wrapper,
    ]),
  },
  ElementLayoutInline: {
    container: 'flex',
    container_error: 'has-error',
    $container: (classes, { el$ }) => ([
      classes.container,
      !el$.isStatic && el$.errors && !!el$.errors.length ? classes.container_error : null,
      el$.classes.container,
    ]),
  },
  ElementLoader: {
    container: 'relative z-1 order-1',
    loader: 'absolute w-4 h-4 right-full mask-bg mask-form-spinner form-bg-primary animate-spin',
    loader_sm: 'form-top-input-border-sm form-mr-input-sm mt-0.5',
    loader_md: 'form-top-input-border form-mr-input mt-1',
    loader_lg: 'form-top-input-border-lg form-mr-input-lg mt-1',
    $loader: (classes, { Size }) => ([
      classes.loader,
      classes[`loader_${Size}`],
    ]),
  },
  ElementMessage: {
    container: 'form-color-success block',
    container_sm: 'form-text-small-sm mt-0.5',
    container_md: 'form-text-small mt-1',
    container_lg: 'form-text-small-lg mt-1',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`],
    ]),
  },
  ElementRequired: {
    container: '',
  },
  ElementText: {
    container: '',
    container_before: '',
    container_between: '',
    container_after: '',
    $container: (classes, { type }) => ([
      classes.container,
      classes[`container_${type}`]
    ]),
  },
  FormElements: {
    container: 'grid grid-cols-12',
    container_sm: 'form-gap-x-gutter-sm form-gap-y-gutter-sm',
    container_md: 'form-gap-x-gutter form-gap-y-gutter',
    container_lg: 'form-gap-x-gutter-lg form-gap-y-gutter-lg',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`]
    ]),
  },
  FormErrors: {
    container: 'form-bg-danger form-color-danger',
    container_sm: 'form-radius-input-sm form-text-sm form-mb-gutter-sm py-2 px-3',
    container_md: 'form-radius-input form-text form-mb-gutter py-2 px-3',
    container_lg: 'form-radius-input-lg form-text-lg form-mb-gutter-lg py-3 px-4',
    error: '',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`],
    ])
  },
  FormLanguage: {
    container: 'flex-grow flex-shrink w-full',
    wrapper: 'block border-b-2 text-center',
    wrapper_active: 'form-border-color-primary',
    wrapper_inactive: 'border-transparent',
    wrapper_valid: '',
    wrapper_invalid: 'form-color-danger form-border-color-danger',
    wrapper_sm: 'py-1.5 px-3.5',
    wrapper_md: 'py-2 px-4',
    wrapper_lg: 'py-2 px-4',
    $wrapper: (classes, { selected, Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`],
      selected ? classes.wrapper_active : classes.wrapper_inactive
    ]),
  },
  FormLanguages: {
    container: 'flex items-center justify-between',
    container_sm: 'form-mb-gutter form-text-sm',
    container_md: 'form-mb-gutter-lg form-text',
    container_lg: 'form-mb-gutter-lg form-text-lg',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`],
    ]),
  },
  FormMessages: {
    container: 'form-bg-success form-color-success',
    container_sm: 'form-radius-input-sm form-text-sm form-mb-gutter-sm py-2 px-3',
    container_md: 'form-radius-input form-text form-mb-gutter py-2 px-3',
    container_lg: 'form-radius-input-lg form-text-lg form-mb-gutter-lg py-3 px-4',
    message: '',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`],
    ])
  },
  FormStep: {
    container: 'form-step',
    container_active: 'form-step-active',
    container_inactive: '',
    container_invalid: 'form-step-has-errors',
    container_valid: '',
    container_disabled: 'form-step-disabled',
    container_enabled: '',
    container_completed: 'form-step-completed',
    container_incompleted: '',
    container_pending: 'form-step-pending',
    wrapper: '',
    $container: (classes, { active, isDisabled, completed, invalid, pending }) => ([
      classes.container,
      active ? classes.container_active : classes.container_inactive,
      isDisabled ? classes.container_disabled : classes.container_enabled,
      completed ? classes.container_completed : classes.container_incompleted,
      invalid ? classes.container_invalid : classes.container_valid,
      pending ? classes.container_pending : null,
    ]),
  },
  FormSteps: {
    container: 'form-steps',
    container_sm: 'form-mb-gutter form-text-sm',
    container_md: 'form-mb-gutter-lg form-text',
    container_lg: 'form-mb-gutter-lg form-text-lg',
    wrapper: 'flex justify-between overflow-x-auto',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`],
    ]),
  },
  FormStepsControl: {
    button: 'form-border-width-btn form-shadow-btn focus:form-ring focus:outline-zero disabled:pointer-events-none disabled:opacity-60 disabled:cursor-not-allowed',
    button_previous: '',
    button_previous_enabled: 'form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary transition-transform transform hover:scale-105',
    button_previous_disabled: 'form-bg-btn-secondary form-color-btn-secondary form-border-color-btn-secondary opacity-60 pointer-events-none',
    button_next: '',
    button_next_enabled: 'form-bg-primary form-color-on-primary form-border-color-btn transition-transform transform hover:scale-105',
    button_next_disabled: 'form-bg-primary form-color-on-primary form-border-color-btn opacity-60 pointer-events-none cursor-not-allowed',
    button_next_loading: 'text-transparent form-bg-primary form-border-color-btn form-bg-spinner-on-primary opacity-60 pointer-events-none cursor-not-allowed',
    button_finish: '',
    button_finish_enabled: 'form-bg-primary form-color-on-primary form-border-color-btn transition-transform transform hover:scale-105',
    button_finish_disabled: 'form-bg-primary form-color-on-primary form-border-color-btn opacity-60 pointer-events-none cursor-not-allowed',
    button_finish_loading: 'text-transparent form-bg-primary form-border-color-btn form-bg-spinner-on-primary opacity-60 pointer-events-none cursor-not-allowed',
    button_sm: 'form-p-btn-sm form-radius-btn-sm form-text-sm',
    button_md: 'form-p-btn form-radius-btn form-text',
    button_lg: 'form-p-btn-lg form-radius-btn-lg form-text-lg',
    $button: (classes, { isDisabled, isLoading, type, Size }) => ([
      classes.button,
      classes[`button_${Size}`],
      classes[`button_${type}`],
      isDisabled && !isLoading ? classes[`button_${type}_disabled`] : null,
      !isDisabled && !isLoading ? classes[`button_${type}_enabled`] : null,
      isLoading ? classes[`button_${type}_loading`] : null,
    ]),
  },
  FormStepsControls: {
    container: 'flex justify-between',
    container_sm: 'form-mt-gutter form-text-sm',
    container_md: 'form-mt-gutter-lg form-text',
    container_lg: 'form-mt-gutter-lg form-text-lg',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`],
    ]),
  },
  FormTab: {
    container: 'cursor-pointer',
    wrapper: 'block border-b-2',
    wrapper_active: 'form-border-color-primary',
    wrapper_inactive: 'border-transparent',
    wrapper_valid: '',
    wrapper_invalid: 'form-color-danger form-border-color-danger',
    wrapper_sm: 'py-1.5 px-3.5',
    wrapper_md: 'py-2 px-4',
    wrapper_lg: 'py-2 px-4',
    $container: (classes, {}) => ([
      classes.container,
    ]),
    $wrapper: (classes, { active, invalid, Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`],
      active ? classes.wrapper_active : classes.wrapper_inactive,
      invalid ? classes.wrapper_invalid : classes.wrapper_valid,
    ]),
  },
  FormTabs: {
    container: 'flex items-end',
    container_sm: 'form-mb-gutter form-text-sm',
    container_md: 'form-mb-gutter-lg form-text',
    container_lg: 'form-mb-gutter-lg form-text-lg',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`],
    ]),
  },
  Vueform: {
    form: '',
  },

  // Slots
  CheckboxgroupCheckbox: {
    ...checkbox,
    container: 'flex align-start cursor-pointer',
    text: '',
    input: checkbox.input + ' form-shadow-handles',
    input_sm: checkbox.input_sm + ' form-mt-checkbox-sm',
    input_md: checkbox.input_md + ' form-mt-checkbox',
    input_lg: checkbox.input_lg + ' form-mt-checkbox-lg',
  },
  CheckboxgroupCheckbox_tabs: {
    ...groupTabs,
    $wrapper: (classes, { index, items, el$, value, isDisabled, Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`],
      index < Object.keys(items).length - 1 ? classes.wrapper_not_last : null,
      index === 0 ? classes.wrapper_first : null,
      index === 0 ? classes[`wrapper_first_${Size}`] : null,
      index === Object.keys(items).length - 1 ? classes.wrapper_last : null,
      index === Object.keys(items).length - 1 ? classes[`wrapper_last_${Size}`] : null,
      el$.value.indexOf(value) !== -1 ? classes.wrapper_selected : classes.wrapper_unselected,
      isDisabled ? classes.wrapper_disabled : null,
    ])
  },
  CheckboxgroupCheckbox_blocks: {
    ...checkbox,
    ...groupBlocks,
    $wrapper: (classes, { index, items, el$, value, isDisabled, Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`],
      index < Object.keys(items).length - 1 ? classes.wrapper_not_last : null,
      index === 0 ? classes.wrapper_first : null,
      index === 0 ? classes[`wrapper_first_${Size}`] : null,
      index === Object.keys(items).length - 1 ? classes.wrapper_last : null,
      index === Object.keys(items).length - 1 ? classes[`wrapper_last_${Size}`] : null,
      el$.value.indexOf(value) !== -1 ? classes.wrapper_selected : classes.wrapper_unselected,
      isDisabled ? classes.wrapper_disabled : null,
    ]),
    $description: (classes, { Size }) => ([
      classes.description,
      classes[`description_${Size}`],
    ]),
  },
  DragAndDrop: {
    container: 'form-shadow-input form-bg-input form-color-input form-border-width-input border-dashed w-full transition inline-flex flex-col items-center justify-center p-6 cursor-pointer text-center',
    container_sm: 'form-radius-large-sm',
    container_md: 'form-radius-large',
    container_lg: 'form-radius-large-lg',
    container_inactive: 'form-border-color-input',
    container_active: 'form-border-color-primary',
    container_enabled: '',
    container_disabled: 'opacity-50 cursor-not-allowed',
    icon: 'inline-block w-9 h-8 mask-bg mask-form-inbox-in form-bg-primary',
    title: 'font-semibold mt-3',
    description: '',
    $container: (classes, { dragging, disabled, Size }) => ([
      classes.container,
      classes[`container_${Size}`],
      dragging ? classes.container_active : classes.container_inactive,
      disabled ? classes.container_disabled : classes.container_enabled,
    ]),
  },
  FilePreview: {
    container: 'flex justify-center flex-col group relative',
    container_sm: 'form-h-input-min-height-sm',
    container_md: 'form-h-input-min-height',
    container_lg: 'form-h-input-min-height-lg',
    wrapper: 'flex justify-between items-center w-full',
    file: 'flex items-center',
    filenameLink: 'hover:underline',
    filenameStatic: '',
    actions: 'flex items-center',
    percent: 'flex justify-between items-center text-sm form-color-muted group-hover:form-hidden',
    upload: 'form-bg-primary form-color-on-primary form-radius-small text-xs py-0.5 px-1.5 ml-1.5 whitespace-nowrap transition-transform transform hover:scale-105 focus:form-ring',
    progressBar: 'form-bg-passive h-0.75 absolute bottom-0 w-full',
    progress: 'w-0 form-bg-primary transition-all ease-out duration-500 h-0.75',
    warning: 'flex w-4 h-4 items-center justify-center form-bg-danger rounded-full group-hover:form-hidden',
    warningIcon: 'mask-bg mask-form-exclamation-solid form-bg-danger-color mask-size-2.5 block w-full h-full',
    uploaded: 'flex w-4 h-4 items-center justify-center form-bg-success rounded-full group-hover:form-hidden',
    uploadedIcon: 'mask-bg mask-form-check-solid form-bg-success-color mask-size-2.5 block w-full h-full',
    remove: 'flex w-4 h-4 items-center justify-center form-bg-passive form-color-passive rounded-full transition filter hover:brightness-90 form-hidden group-hover:form-inline-block',
    removeIcon: 'mask-bg mask-form-remove-light form-bg-input-color mask-size-3 block w-full h-full',
    assistiveText: 'form-assistive-text',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`],
    ])
  },
  FilePreview_image: {
    container: 'flex justify-start flex-col group relative',
    wrapper: 'flex justify-between items-center w-full',
    image: 'form-shadow-input flex items-center form-bg-passive flex-grow-0 flex-shrink-0',
    image_link: '',
    image_static: '',
    image_sm: 'form-radius-image-sm',
    image_md: 'form-radius-image',
    image_lg: 'form-radius-image-lg',
    img: 'form-w-input-height form-h-input-height form-hide-empty-img object-cover',
    img_sm: 'form-w-input-height-sm form-h-input-height-sm form-radius-image-sm',
    img_md: 'form-w-input-height form-h-input-height form-radius-image',
    img_lg: 'form-w-input-height-lg form-h-input-height-lg form-radius-image-lg',
    file: 'flex items-center flex-grow flex-shrink ml-2.5',
    filenameLink: 'hover:underline',
    filenameStatic: '',
    actions: 'flex items-center',
    percent: 'flex justify-between items-center text-sm form-color-muted group-hover:form-hidden',
    upload: 'form-bg-primary form-color-on-primary form-radius-small text-xs py-0.5 px-1.5 ml-1.5 whitespace-nowrap transition-transform transform hover:scale-105 focus:form-ring',
    progressBar: 'form-bg-passive h-0.75 ml-2.5 absolute bottom-0 right-0',
    progressBar_sm: 'form-left-input-height-sm',
    progressBar_md: 'form-left-input-height',
    progressBar_lg: 'form-left-input-height-lg',
    progress: 'w-0 form-bg-primary transition-all ease-out duration-500 h-0.75',
    warning: 'flex w-4 h-4 items-center justify-center form-bg-danger rounded-full group-hover:form-hidden',
    warningIcon: 'mask-bg mask-form-exclamation-solid form-bg-danger-color mask-size-2.5 block w-full h-full',
    uploaded: 'flex w-4 h-4 items-center justify-center form-bg-success rounded-full group-hover:form-hidden',
    uploadedIcon: 'mask-bg mask-form-check-solid form-bg-success-color mask-size-2.5 block w-full h-full',
    remove: 'flex w-4 h-4 items-center justify-center form-bg-passive form-color-passive rounded-full transition filter hover:brightness-90 form-hidden group-hover:form-inline-block',
    removeIcon: 'mask-bg mask-form-remove-light form-bg-input-color mask-size-3 block w-full h-full',
    assistiveText: 'form-assistive-text',
    $image: (classes, { hasLink, Size }) => ([
      classes.image,
      classes[`image_${Size}`],
      hasLink ? classes.image_link : classes.image_static
    ]),
    $img: (classes, { Size }) => ([
      classes.img,
      classes[`img_${Size}`],
    ]),
    $progressBar: (classes, { Size }) => ([
      classes.progressBar,
      classes[`progressBar_${Size}`],
    ])
  },
  FilePreview_gallery: {
    container: 'flex justify-start flex-col transition duration-500 relative group',
    container_sm: 'form-w-gallery-sm form-h-gallery-sm',
    container_md: 'form-w-gallery form-h-gallery',
    container_lg: 'form-w-gallery-lg form-h-gallery-lg',
    image: 'form-shadow-input w-full h-full form-bg-passive',
    image_sm: 'form-radius-gallery-sm',
    image_md: 'form-radius-gallery',
    image_lg: 'form-radius-gallery-lg',
    image_link: '',
    image_static: '',
    img: 'w-full h-full object-cover form-hide-empty-img',
    img_sm: 'form-radius-gallery-sm',
    img_md: 'form-radius-gallery',
    img_lg: 'form-radius-gallery-lg',
    overlay: 'absolute inset-0 bg-white bg-opacity-50 transition duration-300 opacity-0 invisible flex items-center justify-center p-3 form-radius-input group-hover:form-visible group-hover:opacity-100',
    overlay_sm: 'form-radius-gallery-sm',
    overlay_md: 'form-radius-gallery',
    overlay_lg: 'form-radius-gallery-lg',
    upload: 'relative z-1 form-bg-primary form-color-on-primary form-radius-small text-xs py-0.5 px-1.5 whitespace-nowrap transition-transform transform hover:scale-105 focus:form-ring',
    progressBar: 'bg-white absolute left-1 right-1 bottom-1 h-0.75 z-1',
    progress: 'w-0 form-bg-primary transition-all ease-out duration-500 h-0.75',
    warning: 'absolute right-0.5 bottom-0.5 mr-px mb-px flex w-4 h-4 items-center justify-center form-bg-danger rounded-full',
    warningIcon: 'mask-bg mask-form-exclamation-solid form-bg-danger-color mask-size-2.5 block w-full h-full',
    uploaded: 'absolute right-0.5 bottom-0.5 mr-px mb-px flex w-4 h-4 items-center justify-center form-bg-success rounded-full',
    uploadedIcon: 'mask-bg mask-form-check-solid form-bg-success-color mask-size-2.5 block w-full h-full',
    remove: 'flex w-4 h-4 items-center justify-center form-bg-passive form-color-passive absolute top-0.5 right-0.5 mt-px mr-px form-hidden rounded-full transition filter hover:brightness-90 group-hover:form-inline-block ',
    removeIcon: 'mask-bg mask-form-remove-light form-bg-input-color mask-size-3 block w-full h-full',
    assistiveText: 'form-assistive-text',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`],
    ]),
    $image: (classes, { Size }) => ([
      classes.image,
      classes[`image_${Size}`],
    ]),
    $img: (classes, { Size }) => ([
      classes.img,
      classes[`img_${Size}`],
    ]),
    $overlay: (classes, { Size }) => ([
      classes.overlay,
      classes[`overlay_${Size}`],
    ]),
  },
  RadiogroupRadio: {
    ...radio,
    container: 'flex align-start cursor-pointer',
    text: '',
    input: radio.input + ' form-shadow-handles',
    input_sm: radio.input_sm + ' form-mt-checkbox-sm',
    input_md: radio.input_md + ' form-mt-checkbox',
    input_lg: radio.input_lg + ' form-mt-checkbox-lg',
  },
  RadiogroupRadio_tabs: {
    ...groupTabs,
    $wrapper: (classes, { index, items, el$, value, isDisabled, Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`],
      index < Object.keys(items).length - 1 ? classes.wrapper_not_last : null,
      index === 0 ? classes.wrapper_first : null,
      index === 0 ? classes[`wrapper_first_${Size}`] : null,
      index === Object.keys(items).length - 1 ? classes.wrapper_last : null,
      index === Object.keys(items).length - 1 ? classes[`wrapper_last_${Size}`] : null,
      el$.value == value ? classes.wrapper_selected : classes.wrapper_unselected,
      isDisabled ? classes.wrapper_disabled : null,
    ]),
  },
  RadiogroupRadio_blocks: {
    ...radio,
    ...groupBlocks,
    $wrapper: (classes, { index, items, el$, value, isDisabled, Size }) => ([
      classes.wrapper,
      classes[`wrapper_${Size}`],
      index < Object.keys(items).length - 1 ? classes.wrapper_not_last : null,
      index === 0 ? classes.wrapper_first : null,
      index === 0 ? classes[`wrapper_first_${Size}`] : null,
      index === Object.keys(items).length - 1 ? classes.wrapper_last : null,
      index === Object.keys(items).length - 1 ? classes[`wrapper_last_${Size}`] : null,
      el$.value == value ? classes.wrapper_selected : classes.wrapper_unselected,
      isDisabled ? classes.wrapper_disabled : null,
    ]),
    $description: (classes, { Size }) => ([
      classes.description,
      classes[`description_${Size}`],
    ]),
  },
}